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

是的，KineticJS 4.7 似乎有一个更完整的 canvas.context 包装器，但 fillText 方法还不尊重 context.fillStyle 或 this.setFill。

[ 更新 ]

由于 Kinetic 的“上下文”在 fillText 方面的功能并不完整，因此有一种方法可以获取底层上下文并使用它来填充不同颜色的文本。

这是一个小提琴示例：http: //jsfiddle.net/m1erickson/df6Uv/

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);

      var ctx=this.getContext()._context;
      ctx.save();
      ctx.font="18px verdana";
      ctx.fillStyle="#ffffff";
      ctx.fillText("Hello World!",225,90);
      ctx.restore();

    },
    stroke: 'black',
    strokeWidth: 4
});
于 2013-09-23T18:06:00.377 回答
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 回答