Megosztás a következőn keresztül:


Átlátszatlansági maszkok áttekintése

Az átlátszatlansági maszkok lehetővé teszik, hogy egy elem vagy vizualizáció részei áttetszőek vagy részben áttetszőek legyenek. Átlátszatlansági maszk létrehozásához alkalmaznia kell a Brush-t az elem OpacityMask tulajdonságára vagy Visual-re. Az ecset az elemre vagy vizuális elemre van leképezve, és az egyes ecset képpontok opacitási értéke határozza meg az elem vagy vizuális elem egyes megfelelő képpontjainak átlátszóságát.

Előfeltételek

Ez az áttekintés feltételezi, hogy ismeri Brush objektumokat. A kefék használatának bevezetése: Színekkel és színátmenetekkel történő festés áttekintése. További információ a ImageBrush-ról és a DrawingBrush-ről a Képek, rajzok és vizualizációkcímű részben található.

Vizuális effektusok létrehozása opacitásmaszkokkal

Az átlátszatlansági maszk úgy működik, hogy annak tartalmát az elemhez vagy a vizuális elemhez társítja. Ezután az ecset képpontjainak alfa csatornája határozza meg az elem vagy vizuális elem megfelelő képpontjainak átlátszóságát; figyelmen kívül hagyja az ecset tényleges színét. Ha a kefe egy adott része átlátszó, az elem vagy vizualizáció megfelelő része transzparenssé válik. Ha a kefe egy adott része átlátszatlan, az elem vagy vizualizáció megfelelő részének átlátszatlansága nem változik. Az átlátszatlansági maszk által megadott átlátszatlanság az elemben vagy vizualizációban található összes átlátszatlansági beállítással együtt jelenik meg. Például, ha egy elem 25 százalékos átlátszó, és egy áttetszőség maszkot alkalmazunk, amely teljesen átlátszatlanról teljesen átlátszóra vált, az eredmény egy olyan elem, amely 25 százalékos átlátszóságról teljesen átlátszóra vált.

Megjegyzés:

Bár az ebben az áttekintésben szereplő példák bemutatják az átlátszatlansági maszkok használatát a képelemeken, az átlátszatlansági maszk bármilyen elemre vagy Visualalkalmazható, beleértve a paneleket és vezérlőket is.

Az átlátszatlansági maszkok érdekes vizuális effektusokat hoznak létre, például képeket vagy gombokat hoznak létre, amelyek elhalványulnak a nézetből, textúrákat adnak hozzá az elemekhez, vagy színátmeneteket kombinálnak az üvegszerű felületek létrehozásához. Az alábbi ábra egy átlátszatlansági maszk használatát mutatja be. A maszk áttetsző részeinek megjelenítéséhez kockás hátteret használnak.

LinearGradientBrush átlátszatlansági maszkkal rendelkező objektum
Átlátszatlanság maszkolási példa

Átlátszatlansági maszk létrehozása

Átlátszatlansági maszk létrehozásához hozzon létre egy Brush, és alkalmazza azt egy elem vagy vizualizáció OpacityMask tulajdonságára. Bármely típusú Brush használható átlátszatlansági maszkként.

  • LinearGradientBrush, RadialGradientBrush: Egy elem vagy vizualizáció elhalványítására használják, hogy eltűnjön a nézetből.

    Az alábbi képen egy átlátszatlansági maszkként használt LinearGradientBrush látható.

    Egy LinearGradientBrush átlátszatlansági maszkkal rendelkező objektum
    Átlátszósági maszk példája a LinearGradientBrush esetében

  • ImageBrush: Textúra és lágy vagy szakadt éleffektusok létrehozására szolgál.

    Az alábbi képen egy átlátszatlansági maszkként használt ImageBrush látható.

    Olyan objektum, amely ImageBrush átlátszatlansági maszkot tartalmaz
    LinearGradientBrush átlátszatlanság maszkolási példa

  • DrawingBrush: Alakzatok, képek és színátmenetek mintáiból összetett átlátszatlansági maszkok létrehozására szolgál.

    Az alábbi képen egy átlátszatlansági maszkként használt DrawingBrush látható.

    Rajzkefés átlátszatlansági maszkkal rendelkező objektum
    Példa a DrawingBrush opacitásának maszkolására.

A színátmenetes kefék (LinearGradientBrush és RadialGradientBrush) különösen jól használhatók átlátszatlansági maszkként. Mivel egy SolidColorBrush egységes színnel tölti ki a területet, gyenge átlátszósági maszkokat készít; SolidColorBrush használata egyenértékű az elem vagy vizualizáció Opacity tulajdonságának beállításával.

Színátmenet használata átlátszatlansági maszkként

Színátmenetes kitöltés létrehozásához két vagy több színátmeneti végpontot kell megadnia. Minden színátmeneti pont egy színt és egy pozíciót ír le (a színátmenetek létrehozásáról és használatáról további információt a Egyszínű festés és színátmenetek áttekintési című témakörben talál). A folyamat ugyanaz, ha átlátszatlansági maszkként használ színátmenetet, azzal a kivétellel, hogy a színkeverés helyett az átlátszatlansági maszk színátmenete az alfa csatornaértékeket keveri. Tehát a színátmenet tartalmának tényleges színe nem számít; csak az egyes színek alfa csatornája vagy átlátszatlansága számít. Az alábbiakban egy példa látható.

<!--With the opacity mask:--> 
<Image
  Width="200" Height="150"
  Source="sampleImages\Waterlilies.jpg"
  Margin="10"
  HorizontalAlignment="Left"
  Grid.Column="2" Grid.Row="3">
  <Image.OpacityMask>
    <LinearGradientBrush StartPoint="0.1,0.1" EndPoint="0.75,0.75">
      <LinearGradientBrush.GradientStops>
        <GradientStop Offset="0" Color="Black"/>
        <GradientStop Offset="1" Color="Transparent"/>
      </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>
  </Image.OpacityMask>
</Image>

Átlátszatlansági maszk színátmenet lépéseinek beállítása

Az előző példában a rendszer által definiált szín Black a színátmenet kezdőszíne. Mivel a Colors osztály összes színe, kivéve Transparent, teljesen átlátszatlan, ezeket egyszerűen lehet használni a színátmenetes opacitásmaszk kezdőszínének meghatározására.

Ha az átlátszatlansági maszkok definiálásakor további alfaértékeket szeretne szabályozni, megadhatja a színek alfa csatornáját ARGB hexadecimális jelöléssel a korrektúra vagy a Color.FromScRgb metódus használatával.

Színátlátszatlanság megadása az XAML-ben

Az Extensible Application Markup Language (XAML) alkalmazásban az ARGB hexadecimális jelöléssel adja meg az egyes színek átlátszóságát. Az ARGB hexadecimális jelölés a következő szintaxist használja:

# aarrggbb

Az előző sorban szereplő aa a szín átlátszóságát meghatározó kétjegyű hexadecimális értéket jelöl. A rr, ggés bb egy kétjegyű hexadecimális értéket jelölnek, amellyel a piros, zöld és kék színt adja meg. Minden hexadecimális számjegy értéke 0-9 vagy A-F lehet. A 0 a legkisebb érték, az F pedig a legnagyobb. A 00 alfaérték egy teljesen átlátszó színt ad meg, míg az FF alfaértéke teljesen átlátszatlan színt hoz létre. Az alábbi példában a hexadecimális ARGB-jelölés két szín megadására szolgál. Az első teljesen átlátszatlan, míg a második teljesen átlátszó.

<Canvas.OpacityMask>
  <RadialGradientBrush>
    <RadialGradientBrush.GradientStops>
      <GradientStop Offset="0" Color="#FF000000"/>
      <GradientStop Offset="1" Color="#00000000"/>
  </RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Canvas.OpacityMask>

Kép használata átlátszatlansági maszkként

A képek átlátszatlansági maszkként is használhatók. Az alábbi képen egy példa látható. A maszk áttetsző részeinek megjelenítéséhez kockás hátteret használnak.

ImageBrush átlátszatlansági maszkkal rendelkező objektum
Átlátszatlanság maszkolási példa

Ha egy képet átlátszatlansági maszkként szeretne használni, használjon egy ImageBrush-t, amely tartalmazza a képet. Átlátszatlansági maszkként használandó kép létrehozásakor mentse a képet olyan formátumban, amely támogatja az áttetszőség több szintjét, például a hordozható hálózati ábrákat (PNG). Az alábbi példa az előző ábra létrehozásához használt kódot mutatja be.

<!-- With the Opacity Mask-->
<Image
  Height="150"
  Width="200"
  Source="sampleImages/Waterlilies.jpg"
  HorizontalAlignment="Left"
  Margin="10"
  Grid.Column="2" Grid.Row="1">
  <Image.OpacityMask>
    <ImageBrush ImageSource="sampleImages/tornedges.png"/>
  </Image.OpacityMask>
</Image>

Csempekép használata átlátszatlansági maszkként

A következő példában ugyanazt a képet használják egy másik ImageBrush-val, de az ecset csempézés funkciói segítségével a képből 50 képpontos négyzetek csempéi készülnek.

<!-- With the Opacity Mask -->
<Image
  Height="150"
  Width="200"
  Source="sampleImages/Waterlilies.jpg"
  HorizontalAlignment="Left"
  Margin="10"
  Grid.Column="2" Grid.Row="2">

  <Image.OpacityMask>
    <ImageBrush
      Viewport="0,0,50,50"
      ViewportUnits="Absolute"
      TileMode="Tile" 
      ImageSource="sampleImages/tornedges.png"/>
  </Image.OpacityMask>
</Image>

Átlátszatlansági maszk létrehozása rajzból

A rajzok átlátszatlansági maszkként használhatók. A rajzon belüli alakzatok színátmenetekkel, egyszínű színekkel, képekkel vagy akár más rajzokkal is kitölthetők. Az alábbi képen egy opacitásmaszkként használt rajz látható. A maszk áttetsző részeinek megjelenítéséhez kockás hátteret használnak.

Objektum DrawingBrush átlátszósági maszkkal
Példa a DrawingBrush opacitásának maszkolására.

Ha átlátszatlansági maszkként szeretne rajzot használni, használjon egy DrawingBrush, amely tartalmazza a rajzot. Az alábbi példa az előző ábra létrehozásához használt kódot mutatja be:

<!-- With the Opacity Mask-->
<Image 
      Grid.Row="4" Grid.Column="5"
      Height="150"
      Width="200"
      Source="sampleImages/Waterlilies.jpg">
  <Image.OpacityMask>
    <DrawingBrush>
      <DrawingBrush.Drawing>
        <GeometryDrawing>
          <GeometryDrawing.Brush>
            <RadialGradientBrush>
              <RadialGradientBrush.GradientStops>
                <GradientStop Offset="0" Color="Black" />
                <GradientStop Offset="1" Color="Transparent" />
              </RadialGradientBrush.GradientStops>
            </RadialGradientBrush>
          </GeometryDrawing.Brush>
          <GeometryDrawing.Geometry>
            <RectangleGeometry Rect="0.05,0.05 0.9,0.9" />
          </GeometryDrawing.Geometry>
          <GeometryDrawing.Pen>
            <Pen Thickness="0.1" Brush="Black" />
          </GeometryDrawing.Pen>
        </GeometryDrawing>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Image.OpacityMask>
</Image>

Csemperajz használata átlátszatlansági maszkként

A ImageBrush-hoz hasonlóan a DrawingBrush is képes a saját rajzának csempézésére. Az alábbi példában egy rajzecsetet használunk csempézett átlátszósági maszk létrehozásához.

<!-- With the Opacity Mask-->
<Button
   Grid.Row="8" Grid.Column="5"
  Height="100"
  Width="200"
  FontFamily="MS Gothic"
  FontSize="16">
  A Button
  <Button.OpacityMask>
    <DrawingBrush Viewport="0,0,0.25,0.25" TileMode="Tile">
      <DrawingBrush.Drawing>
        <GeometryDrawing>
          <GeometryDrawing.Brush>
            <RadialGradientBrush>
              <RadialGradientBrush.GradientStops>
                <GradientStop Offset="0" Color="Black" />
                <GradientStop Offset="1" Color="Transparent" />
              </RadialGradientBrush.GradientStops>
            </RadialGradientBrush>
          </GeometryDrawing.Brush>
          <GeometryDrawing.Geometry>
            <RectangleGeometry Rect="0.05,0.05 0.9,0.9" />
          </GeometryDrawing.Geometry>
          <GeometryDrawing.Pen>
            <Pen Thickness="0.1" Brush="Black" />
          </GeometryDrawing.Pen>
        </GeometryDrawing>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Button.OpacityMask>
</Button>

Lásd még