html5-canvas - 在 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

其实很简单，像这样扩展Text对象

<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/

PS我刚刚写了一个例子（黑色和白色），但你可以改变addColorStop从this.gradient动态设置渐变颜色！

Answer 2

目前没有办法做到这一点。对不起。有计划在未来为 Text 添加对填充和描边方法的更好控制。