이미지 채우기로 사용자 정의 모양 만들기 Kineticjs

Question

나는 Kinetic.js를 사용하여 프로젝트 작업을하고 있습니다. 현재 버전을 사용 중입니다. 커스텀 도형을 그리고 그 커스텀 도형을 이미지 패턴으로 채우고 싶습니다. 누군가가 할 수 있다고 나에게 말해 줄 수 있습니까?

Answer 1

가 KineticJS 자습서를 참조하십시오 : http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/

는 이미지 패턴과 모양 채우기 :

은 사용자 정의 모양 그리기 http://www.html5canvastutorials.com/kineticjs/html5-canvas-set-fill-with-kineticjs/이

var imageObj = new Image(); 
imageObj.onload = function() { 
    drawImage(this); 
}; 
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; 

var custom_shape_triangle = new Kinetic.Shape({ 
    drawFunc: function(canvas) { 
    var context = canvas.getContext(); 
    context.beginPath(); 
    context.moveTo(200, 50); 
    context.lineTo(420, 80); 
    context.quadraticCurveTo(300, 100, 260, 170); 
    context.closePath(); 
    canvas.fillStroke(this); 
    }, 
    fillPatternImage: imageObj, 
    stroke: 'black', 
    strokeWidth: 4 
}); 

fillPatternImage 속성은 당신이 찾고있는 무엇을,도있다 fillPattern에 사용할 수있는 다른 많은 옵션은 KineticJS 문서를 참조하십시오. http://kineticjs.com/docs/Kinetic.Shape.html