В настоящее время я ищу способ добавить градиент к моему текстовому объекту, созданному с помощью 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);
На самом деле это очень просто, просто расширьте объект 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/
P.S. Я только что написал пример (черно-белый), но вы можете изменить addColorStop с this.gradient, чтобы динамически установить цвета градиента!
В настоящее время нет способа сделать это. Извиняюсь. В будущем планируется улучшить управление методами заливки и обводки текста.
