在图像边界内保持油漆

Question

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

我的应用程序代码非常类似于this sample code。

Answer 1

1）解决方案1：我通过首先使图像背景变白并且内部部分透明，然后将globalcompositeoperation设置为目的地顶部来实现这一工作。

解决方案2：我已经使用css将图像放在canvas元素的顶部，然后使用了一个名为pointer-events：none的css属性。这使得事件通过前面的对象传递到后面的元素，在这个例子中是我的画布。所以由于图像的内部透明部分，您可以在画布上看到颜色，并且由于图像背景是白色的，您无法看到它背后的任何东西。

Answer 2

当我正确理解你的时候，你希望用户无法销毁模板图像的线条。

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

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