記事"CCanvas クラスを知る透明なオブジェクトの描画方法"についてのディスカッション - ページ 6

[Реter Konow]

Nikolai Semko:

それは簡単すぎるよ。

質問の本質をマスターし、定着させるための課題がここにある：

- ARGB(a1,r1,g1,b1)とARGB(a2,r2,g2,b2)の2色を1つのレイヤーに混ぜる方法。

このブレンドなしには、アンチエイリアスされたオブジェクトを適切に重ねることは不可能です。

ざっと見て：最初のレイヤーの色に、記事で説明されている方法で最初のARGB(a1,r1,g1,b1) を重ねます。 次に、最初の色の上に、同じ公式に従ってARGB計算を行いながら、2番目の色を適用します。この時、一番下の色は最初の色になり、元のレイヤーの色の上に重ねます。

間違っているかもしれないが、なぜうまくいかないんだ？

ZY：まだ実験していないのですが、上の2つのレイヤーの最終的な透明度の計算が間違っているので、最初のオプションはうまくいかないかもしれません。この場合、真ん中のレイヤーと上のレイヤーを混ぜて、共通の色を得た後、元のレイヤーに重ね合わせる必要があります。

[Nikolai Semko]

Реter Konow:

簡単に説明すると、最初のレイヤーの色の上に、記事で説明されている方法で最初のARGB(a1,r1,g1,b1) を重ねます。 次に、最初の色の上に、同じ公式に従ってARGB計算を行い、2番目の色を適用します。今回は、一番下の色が最初の色となり、最初のレイヤーの色の上に置かれます。

私が間違っているのかもしれないが、なぜうまくいかないのだろう？

ZY：まだ実験していないのですが、上の2つのレイヤーの最終的な透明度の計算が間違っているので、最初のオプションはうまくいかないかもしれません。この場合、真ん中のレイヤーと上のレイヤーを混ぜて、共通の色を得た後、元のレイヤーに重ね合わせる必要があります。

これは実は簡単な作業ではない。

しかし、これを自力で解決できる人は、当然ながら色の第一人者と見なすことができる。

この公式がないために、この記事はアカデミックとはほど遠い。

[Dmitry Fedoseev]

Nikolai Semko:
簡単なことではない。

しかし、それを自力で解決できる者は、当然、色の第一人者とみなされる。

どうやって？自分で実験してみた？おそらく一番上の色をフィルターとして使い、一番下のレイヤーの各成分（rgb）を、一番上のレイヤーの対応する成分のレベルと透明度に比例して計算する（下から上をどれだけ通過するかが決まる）。 次に、一番上の成分のレベルを不透明度に比例して再計算する（一番上にどれだけ残るかが決まる）。最後に、ボトムとトップのレイヤーの各成分の平均を計算する（元のボトムとトップではなく、書かれているように再計算されたもの）。試していない。

まあ、あるいは透明度に比例した成分を足し合わせるだけか。

実験してみないと...。興味深い作業だ。

[Nikolai Semko]

Dmitry Fedoseev:

どうやって？自分で実験しましたか？

私は4年前にこの問題を解決したが、多くのブレインストーミングを行った。

多くのブレインストーミングが行われ、誰も解決策を見つけられないようなら、解決策を掲載するよ。

[Dmitry Fedoseev]

ウフフ...。積み重ねる前にフィルターをかける必要もなく、すべてがずっとシンプルになった。コンポーネントは単純に透明度と不透明度に比例して追加される：

r=lr*(255-Alpha)/255+ur*Alpha/255;
g=lg*(255-Alpha)/255+ug*Alpha/255;
b=lb*(255-Alpha)/255+ub*Alpha/255;

Alpha: 255 - トップレイヤーは不透明、0 - 完全透明。

lr, lg, lb - 一番下のレイヤーの構成要素。

ur, ug, ub - トップレイヤーの構成要素。

端末では、背景が黒、四角い赤が不透明、その上に青が透明度50％、さらに黄色が透明度50％。

同じものをフォトショップで表示：

[Nikolai Semko]

Dmitry Fedoseev:

ウフフ...。積み重ねる前にフィルターをかける必要もなく、すべてがずっとシンプルになった。コンポーネントは透明度と不透明度に比例して追加されるだけだ：

Alpha: 255 - トップレイヤーは不透明、0 - 完全透明。

lr, lg, lb - 一番下のレイヤーの構成要素。

ur, ug, ub - トップレイヤーの構成要素。

パソコンに戻ったら、この式を使って2つの透明画像を混ぜてみて、どうなるか試してみよう。:))

[Dmitry Fedoseev]

Nikolai Semko:
コンピューターで、このフルムラを使って2枚の透明な写真を混ぜてみるよ。:))

どうやって2枚の透明な写真をミックスするの？一枚目を背景と重ね合わせ、その上に二枚目を重ねる。

一般的には、2つの透明なものを折り曲げて、それを背景に重ねることもできますが、今はそれについてではありません。

***

特に面白いのは、Photoshopのようにレイヤーを重ねるすべての方法を学ぶことだ。

[Nikolai Semko]

Dmitry Fedoseev:

ウフフ...。積み重ねる前にフィルターをかける必要もなく、すべてがずっとシンプルになった。コンポーネントは透明度と不透明度に比例して追加されるだけだ：

r=lr*(255-Alpha)/255+ur*Alpha/255;
g=lg*(255-Alpha)/255+ug*Alpha/255;
b=lb*(255-Alpha)/255+ub*Alpha/255;

Alpha: 255 - トップレイヤーは不透明、0 - 完全透明。

lr, lg, lb - 一番下のレイヤーの構成要素。

ur, ug, ub - トップレイヤーの構成要素。

ここでは、黒い背景、赤い正方形の不透明、その上に青で透明度50％、さらに黄色で透明度50％。

これはフォトショップでも同じだ：

そうではない...

ポイントは、アルファ1とアルファ2があることです。

そのため、新形成の混合色だけでなく、新形成の透明度も計算する必要があります。

あなたは本質的に背景と透明色を混合する記事の著者の式を繰り返した：

result=backgraund*(1-alpha)+foreground

そして、あなたはそうした：

result=backgraund*(1-alpha)+foreground*alpha

あなたの変形は正しいが、記事の著者は単純な公式で間違いを犯した。）

結局のところ、著者の式ではucharのオーバーフローが簡単に起こることが肉眼でわかる。この重大なミスに4年間も誰も気づかなかったのは不思議だ。

[Nikolai Semko]

ここで、他の透明色を混ぜるアルゴリズムが適用される：

[Dmitry Fedoseev]

なぜ2つの透明なレイヤーを混ぜてから塗るのですか？まず1つのレイヤーを塗り、次にもう1つのレイヤーを塗る。