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

【问题标题】：Correct way to fill shape with image cropped from sprite用从精灵裁剪的图像填充形状的正确方法
【发布时间】：2013-02-27 22:47:33
【问题描述】：

我对 KineticJS 中使用组合图像文件（sprite）中的部分图像（裁剪）填充形状的“正确”方式感到有些困惑。

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

我发现的所有替代品都使用属性“fill”和另一个属性“image”，但这似乎每次都会导致黑色背景。

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

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

【问题讨论】：

【解决方案1】：

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

为了掩盖简单的动画精灵，我会在每次绘制后使用它来添加纯 JavaScript。

context.globalCompositeOperation = 'destination-in';

使用复合操作的drawImage的性能至少比在webkit上手动绘制形状要好。

【讨论】：

我想你误解了我的意思，我不是指多个相关图像中的精灵（对于动画），我的意思是多个独立图像中的精灵，它们只是共享一个文件以减少 GET 的数量要求。据我了解“目的地”，这对我没有帮助，因为以前的图像也需要可见:)
我明白了，在画布中，与 WebGL（无论如何都是 openGL）等其他技术不同，在单个 sprite-sheet 上共享 sprite 仍然需要您为每个 sprite 绘制一次，而不是每个 sprite-sheet 绘制一次.无论如何，在 KineticJS 中，使用 fillPatternImage 填充图像对象将在对象创建时在每个精灵上绘制整个图像，但精灵的进一步更新或移动不会重绘整个图像对象。 'destination-in' 方法将用于在最终画布之前绘制到屏幕外画布上时使用；）