javascript - 使用图像填充Kineticjs制作自定义形状

我正在使用Kinetic.js进行项目。我正在使用当前版本。我想绘制一个自定义形状并用图像图案填充该自定义形状。有人可以告诉我可以做到吗？

最佳答案

请参阅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

关于javascript - 使用图像填充Kineticjs制作自定义形状，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17409538/