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;

将{J}添加到stage时，您会看到文本上的渐变。这是jsfiddle：https://jsfiddle.net/r94zmwxa/

P.S。我刚刚编写了一个示例（黑白），但您可以从addColorStop更改this.gradient以动态设置渐变颜色！

Answer 2

目前无法做到这一点。抱歉。有计划在未来为Text添加更好的填充和描边方法控制。

在createjs中添加渐变文本

2 个答案: