私はすでに不規則な形で画像をトリミングしました。切り抜いた部分に画像を挿入する必要があります。私はこれを行うためにHTML5とJavaScript（kinetic.js）を使用しました（http://imgur.com/Lyt3jを参照）。面積プロットを行いました。rect、polyなどの形状は必要ありません。ユーザー定義の形状が必要であり、マウスを使用してトリミングする必要があります。
誰か助けてくれませんか？
1049 次
1 に答える
0
2D コンテキストの合成設定を見てください。これらを使用すると、パスまたはイメージを使用してキャンバス上でマスキングを実行できます。上.fillPathで作成したパスをソリッドfillColorとcontext.globalCompositeOperation = 'destination-in'で作成すると、パスは描画されず、パスの内部で覆われた画像の部分のみが残ります。残りはアルファ透明になります。代わりに操作を使用する'source-out'と、パスを描画するキャンバスに透明な「穴」が作成されます。
したがって、ソース画像 (挿入したい画像) を含むキャンバス、宛先画像 (他の画像を挿入したい画像) を含むキャンバス、およびパスがある場合、それを行うには 3 つの方法があります。
a) を使用してソース キャンバスへのパスを描画するとsource-in、正しい形状のグラフィックが表示されます。次に、複合操作を元のキャンバスに戻し、ソース キャンバスを宛先キャンバスに設定しsource-overますdrawImage。これにより、元のキャンバスの画像がトリミングされるため、必要な場合は事前にコピーを作成してください.
b) を使用して宛先イメージへのパスを描画し、パスでdestination-out囲まれた領域を消去し、合成操作を に設定してからdestination-atop、drawImageソース イメージを宛先イメージに設定します。宛先イメージは、宛先の透明部分の「後ろ」に挿入されます。このバリアントは、ソース キャンバスに対して非破壊的です。完了したら、globalCompositeOperation を設定し直すことを忘れないsource-overでください。そうしないと、他のキャンバス操作が期待どおりに動作しなくなる可能性があります。
c) b) と同じようにdestination-out、コピー先のキャンバスに穴を開けますが、その後、合成操作を通常の設定に設定source-overし、コピー先をソースに描画します。これで、ソース キャンバスにイメージが完成しました。
于 2013-01-06T22:54:08.857 に答える