将油漆保持在图像边界内

Question

我正在为iPad构建一个孩子的Paint应用程序。基本上我已经制作了一个带有图像的画布，并且使用鼠标事件，可以在其上进行着色。但是，我不希望颜色超出我的图像边界。怎么可能？

我的应用代码与this sample code非常相似。

Answer 1

当我理解正确时，您希望用户无法破坏模板图像的线条。

您可以将艺术线条图像放在另一个HTML元素上（您可以使用另一个画布，但静态图像可能就足够了）并将此图片放在用户使用CSS定位绘制的画布上。下面的油漆画布将通过上图的透明部分看到。

请注意，输入事件将被上层对象捕获，而不是下层对象。

Answer 2

1）解决方案1：我的工作原理是首先将图像背景设置为白色，内部部分透明，然后将globalcompositeoperation设置为destination-atop。

2）解决方案2：我使用css将图像放在canvas元素的顶部，然后使用了一个名为pointer-events：none的css属性。这使得事件通过前面的对象传递到后面的元素，在这种情况下是我的画布。因此，由于图像的内部透明部分，您可以在画布上看到颜色，而图像背景是白色的，您无法看到它背后的任何内容。