問題タブ [porter-duff]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
0 に答える
959 参照

android - Bitmap.Config.ALPHA_8 と組み合わせた Android PorterDuff.Mode.DST_IN

私はビットマップ マスキングをいじっていましたが、ペイントでALPHA_8ビットマップ マスクを描画しようとすると、時折興味深い問題が見つかりました。PorterDuff.Mode.DST_IN少なくとも Android 6.x および 5.x では機能しません。
これが私のドローアブルコードのサンプルです:

mMaskBitmap構成がある場合ARGB_8888、問題なく動作します。しかし、私が使用するときALPHA_8はそうではありません。その場合、画像はまったくマスクされません。

アクティビティにリソースをロードする方法は次のとおりです。

.extractAlpha()私にビットマップを与えていることに注意してくださいALPHA_8

Drawable の使用方法は次のとおりです。

さらに興味深いのは、最初にマスクを描画してからSRC_INペイントで絵を描く別のアプローチを試すと、マスクを使用しても問題なく動作しますALPHA_8

...

これは、私がGitHubで実験したプロジェクト全体へのリンクです。動作しないソリューションと動作するソリューションの両方が含まれているので、自由に遊んでください。

と の組み合わせが期待どおりに機能しない理由を知っている人はいDST_INますALPHA_8か?

0 投票する
1 に答える
520 参照

android - 複数の長方形が交差する PorterDuffXfermode キャンバス

キャンバスに 3 つの四角形を描画しようとしています。
最初のものは緑色で、後ろに進んでいます。2 番目は赤で、緑の上にあります。3 番目はそれらの両方を通過しており、最初の 2 つの四角形を「カットスルー」する必要があります。このようなもの:

ここに画像の説明を入力

私は次のようなことをすべきだと思います:

しかし、どの PorterDuffXfermode を使用するか、および 1 つの四角形だけを切り取り、それらすべてに穴を開けずにこれを取得する方法:

ここに画像の説明を入力

PS 異なるビットマップを作成して描画することはできません。これは、1 秒または 2 秒ごとに再描画されるためです。

0 投票する
1 に答える
635 参照

ios - Metal では、従来の Porter-Duff の「over」合成の正しいblendFactors は何ですか?

iOS 用の Metal アプリでは、単純なクワッドにアタッチされた半透明のテクスチャをレンダリングする必要があります。colorAttachment の rgb とアルファのブレンド係数が正しくわかりません。

私のセットアップ:

1) 不透明度 50% の Photoshop で作成された赤色の画像。透明度のある PNG として保存されます。画像はプロジェクトの Assets フォルダーに保存されます。

ここに画像の説明を入力

2)最初に を作成し、次に- CoreImage - フィールドを使用してイメージ データを抽出することで、メタルテクスチャを作成します。この画像は現在、事前に乗算された形式になっているため、従来の Porter-Duff 式を適用できます。それについては後で詳しく説明します。UIImage.cgImage

3) これは私の退屈なテクスチャ フラグメント シェーダです。

4) これは私の colorAttachment ブレンド係数設定で、Porter-Duff の「オーバー」式です。

5) 白い背景の上にこの赤い半透明のテクスチャでクワッドをレンダリングすると、画像が暗すぎます。正しくないレンダリング (右の画像) は rgb = (182, 127, 127) です。Photoshop の正しい画像は rgb (255, 127, 127) です。

ここに画像の説明を入力

正しいブレンド関数は何ですか?

アップデート

コードを確認したい場合は、こちらの Github にあります: https://github.com/turner/HelloMetal/tree/2_pass_render

0 投票する
1 に答える
644 参照

android - Canvas Android での重複パス

いくつかのパスで構成される形状を描画しようとしています:-

このような複数の灰色の線のパス

このような青い線のパス

pathColorList パスとそのペイント カラーのリストです。

  • 問題は、常にグレーパスの上にブルーパスが必要なことです。灰色のパスが青色のパスと重なっても 、オーバーラップ領域は灰色ではなく青色でなければならないため、青色のバンドが依然として灰色のバンドの上にあるように見えます。

  • 私が試したこと: -

    • 1 つの方法は、すべて灰色のパスを描画してから、すべて青色のパスを描画することです。しかし、私がプロットしようとしている形状には、パスアニメーションの順序でプロットする必要がある複数のグレーとブルーのオーバーラップがあるため、このようにすることはできません。

    • グレイ パスで使用PorterDuffXfermodeしてみましたが、PorterDuffXfermode のどれも機能していないようです

      for (ペア pathColor : pathColorList) {

      /li>

私は自分が間違っていることを理解できません。どんな助けでも大歓迎です。

0 投票する
1 に答える
1318 参照

android - 2 つの RGB グラデーションをマージする

マージしたい 2 つの LinearGradients があります。

  • rgb(0, 0, 0)からrgb(0, 255, 0)(黒から緑) に向かう 1 つの水平方向
  • rgb(0, 0, 0)からrgb(0, 0, 255)(黒から青) に向かう 1 つの垂直方向

私のコードは次のようになります。

赤の値は変化する可能性がありますが、他の 2 つの値は一定です。結果のグラデーションをカラーピッカーで使用したい。次のように表示する必要があります: (ここでも確認できます。カラー ピッカーの右側のペインにある R の文字をクリックする必要があります)。

勾配

私はいくつかの PorterDuff モードを試しました。SCREENほぼ完璧ですが、軽すぎる場合もあります。ADD128 より小さい赤の値を 0 であるかのように表示MULTIPLYします。正方形を 1 つの単色で塗りつぶすだけです。また、グラデーションの色をアルファ 128 に設定してみました。これによりADD、暗すぎXORたり、薄すぎたりしSCREENます。

このグラデーションを正しく作成するにはどうすればよいですか? どの PorterDuff モードを使用すればよいですか?


グラデーションが正しく描画されているかどうかをテストするために、選択した色と同じ色でカーソルを描画します。(選択した色は座標で計算されます) value 以外のすべてのピボット値について、カーソルが見えにくい/見えません。

hsv

白いグラデーションが透明になるのが早すぎるようです。それを作成するために、2 つの線形勾配を作成し、それらをPorterDuff モードComposeShaderとマージしました。SRC_OVER次に、値 (明るさ) の値に対応する透明度を持つ黒い四角形を描画します。必要に応じてコードを投稿できます。

0 投票する
1 に答える
251 参照

android - キャンバスで特定の円の外側のゾーンをクリアする

円を塗りつぶして進行状況を表示するカスタム ビューがありますが、この白い円の外側にあるビューのゾーンを消去する方法を探しています。

ここに画像の説明を入力

ここで、私のコード:

PorterDuffでこれを実行できると確信していますが、方法がわかりません。

0 投票する
0 に答える
66 参照

android - 色のブレンドと porterduffxfermode 効果

この結果は -574974084 です

次の 2 つの色をブレンドに使用していますが、負の数になるのはなぜですか? また、androidでペイントやporterduffxfermodeを使って下の写真のような明るい口紅のエフェクトを作るにはどうすればいいでしょうか?いくつかの提案をお願いします。どうもありがとうございました。

ここに画像の説明を入力