KineticJS：如何在toDataURL函數中包含自定義畫布形狀

Question

我的問題始於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等的屬性。因此，我認為這可能與它有關，或者可能是在將圖層添加到圖層后添加了自定義形狀的事實。階段...

Answer 1

您是正確的，在最新版本之間，已經發生了很大變化，並且這可能破壞了繪圖功能。

您應該查閱每個項目的官方文檔，但是基本上，自定義形狀的屬性已稍作更新...首先，“ 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/

KineticJS：如何在toDataURL函數中包含自定義畫布形狀

問題描述

1 個解決方案

解決方案1
1 2014-04-21 05:17:47

KineticJS：如何在toDataURL函數中包含自定義畫布形狀

問題描述

1 個解決方案

解決方案1 1 2014-04-21 05:17:47

解決方案1
1 2014-04-21 05:17:47