0

私はkineticjs 4.7.0に更新中です。カスタム図形にテキストを追加するのに苦労しています。ここにコード：

var triangle = new Kinetic.Shape({
        drawFunc: function(context) {
          this.setFill('#00D2FF');
          context.beginPath();
          context.moveTo(200, 50);
          context.lineTo(420, 80);
          context.quadraticCurveTo(300, 100, 260, 170);
          context.closePath();
          context.fillStrokeShape(this);

          this.setFill('#FFFFFF');
          context.beginPath();
          context.fillText('Hello World!', 200, 150);
          context.closePath();
          context.fillStrokeShape(this);


        },
        stroke: 'black',
        strokeWidth: 4
      });

グループで Kinetic.Shape と Kinetic.Text を使用する必要がないように、テキストを形状の塗りつぶしとは異なる色にするにはどうすればよいですか?

ここでは jsfiddle http://jsfiddle.net/qQU6G/1/です

4

2 に答える 2

0

drawFunc は複数回呼び出すことができ、期待するキャンバスから常にコンテキストを取得できるとは限らないことに注意してください。Kinetic はヘルパー キャンバスを使用することがあります。上記のアプローチを使用すると問題が発生しますが、「余分な」コードを単純なチェックでラップすると役立ちました。

...
if(context.canvas._canvas.parentNode!=null){   
    var ctx=this.getContext()._context;
    ctx.save();
    ctx.font="18px verdana";
    ctx.fillStyle="#ffffff";
    ctx.fillText("Hello World!",225,90);
    ctx.restore();
}
...
于 2013-12-18T14:19:01.010 に答える