在圖像邊界內保持油漆

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定位繪製的畫布上。下面的油漆畫布將通過上面圖像的透明部分看到。

請注意，輸入事件將被上層對象捕獲，而不是下層對象捕獲。