使用鼠标裁剪和插入具有不规则形状的图像

Question

我已经裁剪出不规则形状的图像。我需要将图像插入裁剪的部分。我使用HTML5和JavaScript（kinetic.js）来做到这一点（参见：http://imgur.com/Lyt3j）。我做了区域绘图。我不想要像rect，poly等形状。我需要一个用户定义的形状，应该用鼠标裁剪。

有人可以帮我吗？

Answer 1

查看2d上下文的compositing settings。这些允许您使用路径或图像在画布上执行遮罩。当您使用实体.fillPath和fillColor context.globalCompositeOperation = 'destination-in'上面创建的路径时，将不会绘制路径，并且只保留图像的内部覆盖的图像部分。路径。其余的将是alpha透明的。当您使用'source-out'操作时，在绘制路径的画布中创建一个透明的“洞”。

所以当你有一个带有源图像的画布（你要插入的图像），一个带有目标图像的画布（你要插入另一个图像的图像）和路径时，有一些方法可以做它

a）使用source-in绘制到源画布的路径，因此您的图形上有正确的图形。然后将复合操作设置回source-over，然后将drawImage源画布设置到目标画布上。这将裁剪源画布上的图像，因此请确保在需要时预先创建副本。

b）使用destination-out绘制目标图像的路径以删除路径所包含的区域，将复合操作设置为destination-atop，然后将drawImage源图像设置为目标图像，然后将“插入”目标的透明部分“后面”。此变体对源画布非破坏性。记得在完成后将globalCompositeOperation设置回source-over，否则其他画布操作可能不再按照您的预期执行。

c）就像在b）中使用destination-out在目标画布上剪切一个洞，然后将复合操作设置为正常设置source-over并将目标绘制到源上。您现在已在源画布上拥有完整的图像。