使用图像填充制作自定义形状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属性是你在找什么，也有许多其他选项可用来填充图案，请参阅KineticJS文档以获得更多信息：http://kineticjs.com/docs/Kinetic.Shape.html