KineticJS - 图像上的图案和填充

我有一个用KineticJS创建的画布，我将透明PNG图像添加到该画布。当堆叠在彼此的顶部时，这使得所有不同部分的服装图像成为一个图像。KineticJS - 图像上的图案和填充

然后，我想要做的是允许用户点击一个模式，然后用该模式更改该服装的特定部分。所以我需要使用该模式填写其中一个图像的不透明部分。我找到了一种方法可以做到这一点并没有使用KineticJS，它看起来是这样的：

ctx.globalCompositeOperation = 'source-in'; 
var ptrn = ctx.createPattern(fabricA, 'repeat'); 
ctx.fillStyle = ptrn; 
ctx.fillRect(0, 0, 375, 260);

我的问题是，有没有办法做到以上KineticJS中相同的步骤？

另外，我第一次尝试不使用KineticJS就做到了这一点，但是当我将上面的代码应用到图层时，它填充了所有图像，因为它们都在同一图层上。所以我猜测我需要更改我的代码以使用多个图层或将图像添加到单个图层中的组。我的想法在这里吗？对于我想要完成的事情，哪个更好？多层？或单个图层上有多个组？

感谢任何人都可以提供的帮助。

来源

2013-04-05 jaz872

如果你想要做自定义绘图然后使用KineticJS形状对象

这是一个KineticJS对象，它可以让你控制它究竟是如何得出。

使用合成方法创建覆盖图。然后将该绘图代码放入一个函数中，并将该函数赋予动力学形状的drawFunc。

这里的Kinetic.Shape的骨架：

var outfit1 = new Kinetic.Shape({ 
    drawFunc: function(canvas) { 

     // you are passed a canvas to draw your custom shape on 
     // so new-up a context and get drawing! 
     var context = canvas.getContext(); 

     context.beginPath(); 

     // Draw stuff--including your composited overlays 
     // You can use any canvas.context drawing commands 

    }, 
    id:"myCustomOutfit" 
});

可以开始使用这里的例子：http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/

来源

2013-04-06 05:15:50 markE

KineticJS - 图像上的图案和填充

回答

相关问题