在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的填充和笔划方法的控制。