,처럼 텍스트 객체를 확장이
<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/
추신. 방금 작성한 예제 (흑백)이지만 addColorStop
을 this.gradient
에서 변경하여 그라디언트 색상을 동적으로 설정할 수 있습니다!
이러한 기능과 관련된 변경 사항이 있습니까? – bks
아니, 확실히 아래에 내 대답을 참조하십시오 가능합니다. – supersan