context.fillText与Kinetic.JS V 4.70

Question

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

我之前使用context.fillStyle＆amp;＆amp;和drawFunc方法中的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();
    }
});