Question

我正在更新到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/

Answer 1

是的，似乎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
});

Answer 2

请注意，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();
}
...

不使用Kinetic.Group将文本添加到自定义形状

2 个答案: