問題タブ [image-clipping]

キャンバスの描画操作を弧状のくさびにクリップしようとしています。ただし、クリッピングパスをキャンバスに設定した後、意図した結果が得られません。

説明のために、これが私がやっていることです：

これは機能し、単純にこのパス ( canvas.drawPath(path, paint)) を描画すると、上記のようにくさびが描画されます。ただし、このパスをキャンバスのクリッピング パスとして設定して描画すると、次のようになります。

代わりに次の結果が得られます (くさびは参照を示すためだけに残されています)。

Pathそのため、代わりに、それ自体ではなく、の境界四角形にクリップしているように見えますPath。ここで何が起こっているのか、何か考えはありますか?

編集更新として、ハードウェアアクセラレーションを可能にする、これを行うはるかに効率的な方法を見つけました。まず、(クリッピングする) イメージ全体をオフスクリーン ビットマップに描画します。BitmapShaderthis を使用して を作成し、Bitmapそのシェーダーを に設定してから、そのオブジェクトPaintを使用してウェッジ パスを描画します。Paint

OpenCLで直接画像ポリゴンのクリッピングは可能ですか? それとも、これには OpenGL の相互運用性が必要ですか?

これが OpenCL で直接可能である場合、この問題は、アルファ チャネルを変更する凹面ポリゴンの塗りつぶしに軽減できると思います。実際、パラメータとしてイメージ (image2d_t) とポリゴン (uint2 配列) を持つ (ネイティブ) カーネルを使用したいと考えています。

Photo Collage Makerの作成には、オブジェクトベースのクリッピング機能を持つ fabric js を使用します。この機能は優れていますが、そのクリッピング領域内の画像は拡大縮小、移動、または回転できません。固定位置のクリッピング領域が必要で、ユーザーが望むように画像を固定クリッピング領域内に配置できます。

私はググって、非常に近い解決策を見つけました。

ファブリック js キャンバスの複数のクリッピング エリア

あるクリッピング領域の画像が別のクリッピング領域に現れた場合。これを回避するにはどうすればよいですか、またはファブリック js を使用してこれを達成する別の方法があります。

(base64 エンコーディングから) 描画された画像を角の丸いキャンバスに保存する必要があります。キャンバスは以下を使用して定義されます。

イメージは期待どおりに表示され (ctx.drawImage などを使用)、角が丸くなっています。次に、丸みを帯びた画像の base64 エンコード データを取得します。

残念ながら、角の丸いキャンバスなしで画像を表示すると、角がまだ残っています...

質問: キャンバスに表示される base64 画像データを取得する簡単な方法はありますか?それとも、苦痛なピクセル クリッピングの試練を経験する必要がありますか?

ありがとう ！

css でクリッピング マスクを作成しようとしましたが、間違った方向に進んでいると思います。これは、私がhtmlに変換しようとしている画像です..

自分の側で試してみたところ、混乱しているように見えます。

CSS:

HTML:

提案は大歓迎です。ありがとう！

開発中の新しい Web サイトで問題が発生しています。SVG を使用するのは初めてです。基本的に、要素の下に画像を表示するには、常にページの中央にある円を画像から切り取る必要があります。クリッピングを試してみましたが、すべてが素晴らしかったです。マスク コードでエラーが見つからないようです。これは、私がセットアップしたクイックフィドルへのリンクです。ありがとう！