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

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

---

这里是JSFIDLE

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

[更新]

由于Kinetic的“上下文”在fillText方面不是全功能的，所以这里有一种方法可以获取底层上下文，并使用它以不同的颜色填充文本

下面是一个小提琴的例子：

---

请注意，drawFunc可以被多次调用，而且并不总是可以从预期的画布中获取上下文。有时会使用辅助画布。使用上述方法我遇到了问题，但使用简单的检查包装“额外”代码有助于：

...
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的源代码），我得出结论，我最初的代码理论在使用Kinetic当前的Context包装器（argh！）时不起作用。所以，如果你绝对不想使用一个组来组合你的形状和其他彩色文本，你就必须“作弊”。作弊包括获取实际的CanvasRenderingContext2D，并使用“真实”上下文为文本设置新的颜色。看看我修改过的答案……但要意识到这确实是一个“骗局”，在未来的版本中可能会停止工作。

...
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();
}
...