javascript - 将绘画保持在图像边界内

Question

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

我的应用程序代码与此示例代码非常相似。

Answer 1

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

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

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

Answer 2

1）解决方案1：好吧，我首先使图像背景为白色，内部透明，然后将globalcompositeoperation设置为destination-atop，从而使这个工作正常进行。

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