Kinetic.Group없이 사용자 지정 모양에 텍스트 추가

kineticjs 4.7.0으로 업데이트하는 중입니다. 나는 사용자 정의 모양에 텍스트를 추가하는 데 어려움을 겪고 있습니다. 다음 코드 :Kinetic.Group없이 사용자 지정 모양에 텍스트 추가

var triangle = new Kinetic.Shape({ 
     drawFunc: function(context) { 
      this.setFill('#00D2FF'); 
      context.beginPath(); 
      context.moveTo(200, 50); 
      context.lineTo(420, 80); 
      context.quadraticCurveTo(300, 100, 260, 170); 
      context.closePath(); 
      context.fillStrokeShape(this); 

      this.setFill('#FFFFFF'); 
      context.beginPath(); 
      context.fillText('Hello World!', 200, 150); 
      context.closePath(); 
      context.fillStrokeShape(this); 


     }, 
     stroke: 'black', 
     strokeWidth: 4 
     });

어떻게 텍스트 형태의 충전에 다른 색으로 만들 수 있죠, 그래서 그룹에 Kinetic.Shape 및 Kinetic.Text를 사용할 필요가 없습니다?

다음은이 http://jsfiddle.net/qQU6G/1/

출처

2013-09-23 Nico

예, KineticJS 4.7 canvas.context의보다 완벽한 래퍼를 가지고 나타납니다 jsfiddle하지만 fillText 방법은 아직 context.fillStyle 또는 this.setFill 중 하나를 존중하지 않습니다.

[업데이트] 운동의 "컨텍스트"fillText에 관해서 모든 기능을 갖춘되지 않기 때문에

, 여기에 기본 컨텍스트를 취득하고 다른 색으로 fillText에 그것을 사용하는 방법입니다.

는 여기에 바이올린 예입니다 : http://jsfiddle.net/m1erickson/df6Uv/

var triangle = new Kinetic.Shape({ 
    drawFunc: function(context) { 
     this.setFill('#00D2FF'); 
     context.beginPath(); 
     context.moveTo(200, 50); 
     context.lineTo(420, 80); 
     context.quadraticCurveTo(300, 100, 260, 170); 
     context.closePath(); 
     context.fillStrokeShape(this); 

     var ctx=this.getContext()._context; 
     ctx.save(); 
     ctx.font="18px verdana"; 
     ctx.fillStyle="#ffffff"; 
     ctx.fillText("Hello World!",225,90); 
     ctx.restore(); 

    }, 
    stroke: 'black', 
    strokeWidth: 4 
});

출처

2013-09-23 18:06:00 markE

답장을 보내 주셔서 감사합니다. 나는 당신의 제안으로 놀았지만 그것을 작동시키지 못했습니다. 제발 여기 좀 봐 [http://jsfiddle.net/qQU6G/2/] (http://jsfiddle.net/qQU6G/2/). 나는 모양 위에 검은 텍스트를 얻을 수 없다. – Nico

좋아, 잠시 동안 (Kinetic의 소스 코드를 포함하여) 실험을 한 후, 원래의 코드 이론이 Kinetic의 현재 contxt 래퍼 (argh!)를 사용하여 작동하지 않을 것이라고 결론을 내립니다. 따라서 그룹을 사용하여 모양과 다른 색상의 텍스트를 결합하는 것을 절대 원하지 않으면 "속이기"해야합니다. 속임수에는 실제 CanvasRenderingContext2D를 가져와 "실제"컨텍스트를 사용하여 텍스트에 새로운 색상을 적용하는 작업이 포함됩니다. 내 수정 된 답변을 참조하십시오 ...하지만 그것은 진정한 "속임수"이며 향후 버전에서 작동하지 않을 수도 있습니다. – markE

고마워요. – Nico

이 drawFunc 한 번 이상 호출 할 수 있습니다 항상 당신이 기대 캔버스에서 컨텍스트를 얻을 것이다하지 않도록주의 할. 키네틱 스는 때때로 도우미 캔버스를 사용합니다. 위의 방법을 사용하면 문제가 발생하지만 간단한 체크로 "추가"코드를 래핑하면 도움이됩니다.

... 
if(context.canvas._canvas.parentNode!=null){ 
    var ctx=this.getContext()._context; 
    ctx.save(); 
    ctx.font="18px verdana"; 
    ctx.fillStyle="#ffffff"; 
    ctx.fillText("Hello World!",225,90); 
    ctx.restore(); 
} 
...

출처

2013-12-18 14:19:01

Kinetic.Group없이 사용자 지정 모양에 텍스트 추가

답변

관련 문제