1

私は現在、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);
4

2 に答える 2

4

実際には非常に簡単です。このように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てグラデーションの色を動的に設定できます。

于 2017-02-07T05:52:17.047 に答える
0

現在、これを行う方法はありません。ごめん。将来的には、テキストの塗りと線の方法をより適切に制御する計画があります。

于 2013-02-22T22:08:48.540 に答える