2012-12-01 2 views
1

현재 textjs로 생성 된 텍스트 객체에 그래디언트를 추가하는 방법을 찾고 있습니다.createjs에 그라데이션 텍스트 추가

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); 

답변

3

,처럼 텍스트 객체를 확장이

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

추신. 방금 작성한 예제 (흑백)이지만 addColorStopthis.gradient에서 변경하여 그라디언트 색상을 동적으로 설정할 수 있습니다!

0

현재로서는이를 수행 할 방법이 없습니다. 죄송합니다. 앞으로 텍스트의 채우기 및 획 맞춤 방법을보다 잘 제어 할 계획이 있습니다.

그것은 실제로 매우 쉽게
+0

이러한 기능과 관련된 변경 사항이 있습니까? – bks

+1

아니, 확실히 아래에 내 대답을 참조하십시오 가능합니다. – supersan