Kineticjs가있는 라인 패턴

Question

좋아, 솔리드 컬러가 아닌 스트로크로 패턴이 지정된 이미지를 사용하는 선을 그리려하고 있습니다. Rect 나 다른 도형을 패턴으로 채울 수도 있지만, 내가하려고하는 것이 아니라 선으로 엄격하게 작업하고 있습니다. 그래서 제 질문이 있습니다. 이미지를 패턴에 전달하고 해당 패턴을 선의 획으로 사용할 수 있습니까? 아니면 그냥 Rect를 만들고 각 패턴을 내 패턴으로 채워야합니까?

var line = new Kinetic.Line({ 
points: [0, 0, 0, 500], 
stroke: /Here's where I want the pattern to go\, 
strokeWidth: strokeWidth 

});

Answer 1

Html 캔버스를 사용하면 패턴을 사용하여 획을 그릴 수 있습니다.

키네틱스는 무늬가있는 획을 허용하지 않습니다.

은 그러나 당신은 Kinetic.Shape를 사용하고이 같은 실제 HTML 캔버스 컨텍스트를 잡아 수 있습니다

데모 : http://jsfiddle.net/m1erickson/hTP5J/

var triangle = new Kinetic.Shape({ 
    sceneFunc: function(context) { 
    var ctx=this.getContext()._context; 
    ctx.save(); 
    ctx.beginPath(); 
    ctx.moveTo(100, 50); 
    ctx.lineTo(320, 80); 
    ctx.quadraticCurveTo(200, 100, 160, 170); 
    ctx.closePath(); 
    var pattern=context.createPattern(img, 'repeat'); 
    ctx.strokeStyle=pattern; 
    ctx.lineWidth=20; 
    ctx.stroke(); 
    ctx.restore(); 
    }, 
});