iPad用の子供用ペイントアプリケーションを構築しています。基本的に、画像のあるキャンバスを作成し、マウスイベントを使用して色を付けることができます。ただし、色が画像の境界からはみ出すことは望ましくありません。そんなことがあるものか?
私のアプリ コードは、このサンプル コードによく似ています。
iPad用の子供用ペイントアプリケーションを構築しています。基本的に、画像のあるキャンバスを作成し、マウスイベントを使用して色を付けることができます。ただし、色が画像の境界からはみ出すことは望ましくありません。そんなことがあるものか?
私のアプリ コードは、このサンプル コードによく似ています。
私があなたを正しく理解したとき、あなたはユーザーがテンプレート画像の線画を破壊できないようにしたいと考えています。
ラインアート イメージを別の HTML 要素に配置し (別のキャンバスを使用することもできますが、静的な img で十分な場合があります)、これを CSS ポジショニングを使用してユーザーが描画するキャンバス上に配置できます。下のペイント キャンバスは、上の画像の透明な部分から透けて見えます。
入力イベントは、下のオブジェクトではなく、上のオブジェクトによってキャッチされることに注意してください。
1)解決策1:最初に画像の背景を白く、内側の部分を透明にしてから、globalcompositeoperationをdestination-atopとして設定することで、これを機能させました。
2) 解決策 2: css を使用してキャンバス要素の上に画像を配置し、pointer-events:none という名前の css プロパティを使用しました。これにより、イベントは前面のオブジェクトを通過して背後の要素 (この場合はキャンバス) に渡されます。そのため、画像の内側の透明な部分により、キャンバス上の色を見ることができ、画像の背景が白であるため、その背後には何も見えません.