kineticjs - 带有 Kinetic.JS V 4.70 的 context.fillText

Question

我正在使用 Kinetic.Shape 创建一些自定义文本（我需要对 Kinetic.Text 尚不支持的文本进行渐变填充）。

我之前在 drawFunc 方法中使用 context.fillStyle && context.fillText 实现了这一点，并且运行良好。

然而，从 V 4.7.0 开始，API 略有变化，传递给 drawFunc 的上下文引用现在是 HTML5 画布上下文的包装器。这意味着我不能再直接调用诸如 context.fillText() 或 context.strokeText() 之类的方法。

有没有办法使用 Kinetic 包装器调用这些方法，或者我可以以某种方式使用原始画布上下文来调用它们？

Answer 1

在 drawFunc 中，您可以像这样获得真正的画布上下文：

// the real context

var ctx=this.getContext()._context;

因此，如果您小心不要通过在背后拉动 Kinetic 来扰乱它，您可以这样做：

var shape = new Kinetic.Shape({
    x:0,  // must be 0
    y:0,  // must be 0
    drawFunc:function(ctx){
          var ctx=this.getContext()._context;
          var grad = ctx.createLinearGradient(100,100,200,200 );
          grad.addColorStop(0, 'orange');   
          grad.addColorStop(1, 'blue');
          ctx.fillStyle = grad;
          ctx.save();
          ctx.font="69px verdana";
          ctx.fillText("Gradient!",10,140);
          ctx.strokeText("Gradient!",10,140);
          ctx.restore();
    }
});