html - 用从精灵裁剪的图像填充形状的正确方法

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 上手动绘制形状要好。