在createjs中添加漸變文字

Question

我目前正在尋找一種將漸變添加到使用textjs生成的我的文本對象中的方法。

this.text = new createjs.Text(this.val, this.font, "#efa146"); 
    this.text.textAlign = "center"; 
    this.text.y = this.pos.y; 
    this.text.x = this.pos.x; 

    console.log(this.text); 

    window.stage.addChild(this.text); 

Answer 1

這其實很簡單，只需擴展文本對象這樣

<script> 
    (function() { 
     function GradientText(text, font, color) { 
      this.Text_constructor(text, font, color); 
     } 

     var p = createjs.extend(GradientText, createjs.Text); 

     p._drawTextLine = function (ctx, text, y) { 
      if (this.gradient) { 
       var height = this.getMeasuredLineHeight(); 
       var my_gradient = ctx.createLinearGradient(0, y, 0, y + height); 
       my_gradient.addColorStop(0, "black"); 
       my_gradient.addColorStop(1, "white"); 

       ctx.fillStyle = my_gradient; 
       ctx.fillText(text, 0, y, this.maxWidth || 0xFFFF); 
      } else { 
       this.Text__drawTextLine(ctx, text, y); 
      } 
     }; 

     window.GradientText = createjs.promote(GradientText, "Text"); 
    }()); 
</script> 

現在只需創建一個這樣的GradientText一個實例：

var text = new GradientText("Hello world!", "20px Arial", "#ff0000"); 
text.gradient = true; 

你應該看到一個梯度文本時加它到了stage。這裏是它的jsfiddle：https://jsfiddle.net/r94zmwxa/

P.S.我剛剛寫了一個例子（黑白），但您可以從this.gradient更改addColorStop以動態設置漸變顏色！

Answer 2

目前沒有辦法做到這一點。抱歉。有計劃在未來增加對Text的填充和筆劃方法的控制。