用sprite裁剪的图像填充形状的正确方法

Question

我对KineticJS中的“正确”方式感到有些困惑，以便从组合图像文件（精灵）中填充部分图像（作物）的形状。

似乎可以使用带有定义偏移的fillPatternImage，它似乎绘制完整的图像，尽管图像的其余部分不可见。我将这些形状移动到一个额外的层后，我只获得了可接受的性能，因为我的精灵相对较大，并且没有正确裁剪的影响显着降低了fps。

我发现的所有替代品都使用属性“fill”，其中包含另一个属性“image”，但这似乎每次都会产生黑色背景。

使用图像形状会有所帮助，但很少使用，因为我的形状很少是矩形。

由于KineticJS文档没有提到指定裁剪坐标（“只是”偏移，没有宽度和高度），这样做的绝对正确方法是什么？

Answer 1

绝对“绝对正确的方式”取决于平台和您的特定代码，但是。

你看过精灵吗？ http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-sprite-tutorial/

为了掩盖简单的动画精灵，我会在每次抽奖后使用普通javascript。

context.globalCompositeOperation = 'destination-in';

使用复合操作的drawImage的性能优于在webkit上手动绘制形状，至少。