context.fillText與Kinetic.JS V 4.70

Question

我正在使用Kinetic.Shape來創建一些自定義文本（我需要梯度填充文本，但尚未支持Kinetic.Text）。

我以前在drawFunc方法中使用context.fillStyle & &來實現這個context.fillText，它運行良好。

但是從V4.7.0開始，API已經略有變化，傳遞給drawFunc的上下文引用現在是HTML5 canvas上下文的包裝。這意味着我不能再直接調用諸如context.fillText（）或context.strokeText（）之類的方法。

有沒有辦法使用Kinetic包裝器調用這些方法，或者我可以以某種方式使用原始畫布上下文來調用它們？

Answer 1

裏面drawFunc，你可以得到這樣的真正帆布背景：如果您通過繪製其背後很小心，不要擾亂動力學

// the real context 

var ctx=this.getContext()._context; 

所以，你可以這樣做：

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