メインコンテンツまでスキップ

クリップとマスク

YAUI には、要素の外にはみ出した子孫の部分を隠す方法が 2 つあります。

ClipChildrenYauiMask
形状矩形または角丸矩形 (角丸を含むボックス)角丸を含むボックス、またはスプライトのアルファ
入れ子矩形は任意の深さで入れ子にできます。角丸のクリップは最も近いものだけが適用されます。任意の深さ (最大 255)
コストバッチを切りませんマスクの境界でドローコールを分割します
縁角丸のクリップはアンチエイリアスされますアンチエイリアスされません

十分な場合は ClipChildren を使ってください。

ClipChildren​

YauiElement.ClipChildren を設定すると、CSS の overflow: hidden と同じように、子孫を要素のボックスでクリップします。クリップは要素ごとのデータとして保持されるため、バッチを切りません。

  • すべての祖先の軸平行な矩形のクリップは交差されます。これは頂点シェーダーで Quad を縮めることで適用されるため、ピクセルごとのコストはかかりません。
  • 要素が角丸を持つ場合、クリップはピクセルごとに適用されます。適用されるのは角丸のクリップのうち最も近いものだけです。角丸のクリップの中にある別の角丸のクリップは、外側のクリップでは切られません。その場合は YauiMask を使ってください。
  • 回転した要素は、回転した形ではなく外接矩形でクリップします。回転した形でクリップするには YauiMask を使ってください。

YauiMask​

要素に YauiMask を追加すると、ステンシルバッファで子孫をマスクします。

  • YauiElement では、形状は角丸を含むボックスです。
  • スプライトを持つ YauiImage では、形状はスプライトのアルファです。

マスクは任意の深さで入れ子にできます。ShowMaskGraphic は、要素自身 (ボックス、画像、テキスト) を描画するか、マスクとしてだけ使うかを決めます。

ヒットテストはマスクの外接矩形でクリップされます。

マスクの中のカスタムマテリアルはステンシルに対応している必要があります。カスタムシェーダーを参照してください。