我已经裁剪了不规则形状的图像。我需要将图像插入裁剪部分。我已经使用 HTML5 和 JavaScript (kinetic.js) 来做到这一点（参见：http://imgur.com/Lyt3j ）。我已经完成了区域绘图。我不想要矩形、多边形等形状。我需要一个用户定义的形状，应该使用鼠标进行裁剪。
任何人都可以帮我吗？
问问题
1049 次
1 回答
0
看一下 2d 上下文的合成设置。这些允许您使用路径或图像在画布上执行遮罩。当您.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并将目标绘制到源上。您现在在源画布上拥有完整的图像。
于 2013-01-06T22:54:08.857 回答