KineticJS：如何在 toDataURL 函数中包含自定义画布形状答案

【问题标题】：KineticJS: How can I include custom canvas shapes in a toDataURL functionKineticJS：如何在 toDataURL 函数中包含自定义画布形状
【发布时间】：2014-04-21 13:30:18
【问题描述】：

我的问题始于 KineticJS 的第 5 版，在此之前它不是问题。可以使用 stage.toDataURL 函数将原生 KineticJS 形状（例如正方形和圆形）保存到图像文件中。但它不适用于使用普通画布方法（例如 beginPath(); ）绘制的非动力学形状。和 canvas.fill(); （第 4 版做得很好）。下面的代码绘制了两个矩形，一个红色，一个蓝色。红色是自定义的，蓝色是原生动态矩形。

<body>
   <div id="container"></div>
      <button id="save">
        Save as image
      </button>     
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.2.min.js"> </script>
<script>
  var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
  });
  var layer = new Kinetic.Layer();

  var box = new Kinetic.Rect({
    x: 400,
    y: 80,
    width: 100,
    height: 50,
    fill: '#00D2FF',
    stroke: 'black',
    strokeWidth: 4,
    draggable: true
  });


  layer.add(box);
  stage.add(layer);

  var canvas = layer.getCanvas().getContext('2d');
  canvas.beginPath();   
  canvas.setAttr('strokeStyle', 'black');
  canvas.setAttr('fillStyle', '#FF2222');
  canvas.setAttr('lineWidth', 8);
  canvas.rect(50,80,100,50);
  canvas.stroke();
  canvas.fill();


  document.getElementById('save').addEventListener('click', function() {
    stage.toDataURL({
      callback: function(dataUrl) {
        window.location.href = dataUrl; 
      }
    });
  }, false);
</script>
</body>

两个形状都出现了，但只有蓝色矩形出现在由 toDataURL 函数生成的图像中。它们的绘制方式在 KineticJS 5 中发生了变化，您在其中设置了 fillStyle 等属性，所以我认为这可能与它有关，或者可能是在将图层添加到图层之后添加了自定义形状的事实舞台...

【问题讨论】：

标签： javascript todataurl

【解决方案1】：

您是对的，在最近的版本之间发生了很大变化，这可能破坏了您的绘图功能。

您应该咨询每个项目的official docs，但基本上自定义形状的属性略有更新...首先“StrokeStyle”不再是有效属性。只需使用“中风”。与 FillStyle 相同。

另外 -- 'dashArray' 不再有效，现在它只是 'dash' -- 所以我确信还有更多我不记得的改变了......对，比如 'lineWidth' 是现在'strokeWidth'...

另外——你显示或不显示笔触和填充的方式已经改变......是的，你过去的大部分方式都略有改变。 'drawFunc' 现在也是 'sceneFunc'...

var ctx = layer.getContext();

var customShape01 = new Kinetic.Shape({ 

    sceneFunc: function(ctx) { 

        ctx.beginPath();
        ctx.moveTo(162.1, 213.8);
        ctx.bezierCurveTo(162.1, 213.8, 180.7, 215.3, 193.5, 214.5);
        ctx.bezierCurveTo(205.8, 213.7, 221.8, 212.3, 222.8, 221.4);
        ctx.bezierCurveTo(222.9, 221.7, 222.9, 222.0, 222.9, 222.3);
        ctx.bezierCurveTo(222.9, 232.4, 204.6, 232.7, 192.0, 227.1);
        ctx.bezierCurveTo(179.4, 221.5, 163.1, 213.8, 162.1, 213.8);
        ctx.closePath();
        ctx.fillStrokeShape(this);
   }, 

     id: 'customShape01',
     fill: 'rgb(255, 0, 255)',
     stroke: 'black',
     strokeWidth: 2,
     lineJoin: 'round',
     dash: [5,5],
     dashEnabled: 'true',
     strokeEnabled: 'true'   

});

查看完整的工作示例（您必须允许弹出窗口）。 http://jsfiddle.net/axVXN/1/

【讨论】：