0

私の問題は、KineticJS のバージョン 5 で始まりましたが、それ以前は問題ではありませんでした。正方形や円などのネイティブの KineticJS 形状は、stage.toDataURL 関数を使用して画像ファイルに保存できます。ただし、beginPath() などの通常のキャンバス メソッドで描画された非キネティック シェイプでは機能しません。および canvas.fill(); (バージョン 4 はこれで問題ありませんでした)。次のコードは、赤と青の 2 つの四角形を描画します。赤はカスタム、青はネイティブのキネティック レクタングルです。

<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 などの属性を設定するようになったので、それが関係しているのではないかと考えています。ステージ...

4

1 に答える 1

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/

于 2014-04-21T05:17:47.147 に答える