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

Javascript 使用图像填充Kineticjs制作自定义形状,javascript,canvas,kineticjs,Javascript,Canvas,Kineticjs,我正在使用Kinetic.js进行一个项目。我正在使用当前版本。我想画一个自定义形状并用图像填充该自定义形状。有人能告诉我这是可以做到的吗?请参阅KineticJS教程: 绘制自定义形状: 用图像填充形状: fillPatternImage属性是您需要的,fillPattern还有许多其他选项,请参阅KineticJS文档了解更多信息:+1 fillPatternImage很好地满足了Jesse的需求。您可能需要稍微调整演示代码,因为他们需要自定义KineticJS形状,而不是标准形状;)我已经

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

请参阅KineticJS教程:

绘制自定义形状:

用图像填充形状:


fillPatternImage属性是您需要的,fillPattern还有许多其他选项,请参阅KineticJS文档了解更多信息:

+1 fillPatternImage很好地满足了Jesse的需求。您可能需要稍微调整演示代码,因为他们需要自定义KineticJS形状,而不是标准形状;)我已经尝试过了,但遇到了一些问题,我将看看是否可以组合一个JSFIDLE,看看是否可以复制这个问题。还有,如何定位我正在尝试进行滚动的模式?请查看文档并查找fillPattern属性以了解更多信息:到目前为止,我看到了fillPatternX、fillPatternY、fillPatternOffset、fillPatternOffsetX、fillPatternOffsetY、fillPatternScale、fillPatternScaleX、,fillPatternScaleY,它可以帮助您定位图案。获取JSFIDLE,我们可以进一步帮助您:)上面提到的所有链接都不可用:所有404@VivekTankaria不幸的是,作者关闭了他的主机,剩下的只有这些:
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
});