مشاركة عبر

نظرة عامة حول الأقنعة الشفافه

  • مقالة

أقنعة الشفافية تتيح لك جعل أجزاء من عنصر أو المرئية شفافة أو شفافة جزئياً. لإنشاء قناع الشفافية, قم بتطبيق Brush إلى خاصية OpacityMask من العنصر أو Visual. يتم تعيين الفرشاة إلى العنصر أو المرئي و قيمة الشفافية لكل بكسل فرشاة تستخدم لتحديد ناتج الشفافية لكل بكسل مطابق لعنصر أو مرئي.

يشتمل هذا الموضوع على الأقسام التالية.

  • المتطلبات الأساسية

  • إنشاء تأثيرات مرئية بأقنعة شفافية

  • إنشاء قناع شفافية

  • استخدام تدرج كقناع شفافية

  • تحديد توقف التدرج لقناع الشفافية

  • استخدام صورة كقناع شفافية

  • إنشاء قناع شفافية من رسم

  • مواضيع ذات صلة

المتطلبات الأساسية

هذه النظرة العامة تفترض أنك مألوف بكائنات Brush. للحصول على مقدمة لاستخدام الطباشير ، راجع نظرة عامة على الطلاء بالألوان الصلدة و تدرجاتها. للمعلومات حول ImageBrush, راجع DrawingBrush و رسم صور و رسومات و صور.

إنشاء تأثيرات مرئية بأقنعة شفافية

يعمل قناع الشفافية عن طريق تعيين محتوياته إلى عنصر أو مرئي. ثم يتم استخدام قناة ألفا لكل بكسل خاص بالفرشاة لتحديد ناتج الشفافية لكل بكسل موافق للعنصر أو المرئي الخاص؛ يتم تجاهل اللون الفعلي للفرشاة. إذا كان جزء محدد من الفرشاة شفاف ، الجزء المطابق من العنصر أو المرئي يصبح شفافاً. إذا كان جزء محدد من الفرشاة كامد ، الشفافية للجزء المطابق من العنصر أو المرئي لا يتغير. يتم ضم معدل الشفافية المحدد بواسطة قناع الشفافية مع أية إعدادات شفافية موجودة في العنصر أو مرئية. على سبيل المثال، إذا كان عنصر 25 بالمائة كامد و تم تطبيق قناع الشفافية التي تنتقل من كامد كلياً إلى شفاف كلياً, النتيجة عبارة عن العنصر الذي ينتقل من 25 بالمائة شفافية إلى شفاف تماماً.

ملاحظةملاحظة

على الرغم من أن الأمثلة في هذه النظرة العامة توضح استخدام أقنعة الشفافية على عناصر الصورة, قد يتم تطبيق قناع الشفافية إلى أي عنصر أو Visual بما في ذلك لوحات عناصر التحكم.

تستخدم أقنعة الشفافية لإنشاء التأثيرات المرئية الشيقة مثل إنشاء صور أو أزرار تضاؤل من طريقة العرض, لإضافة المواد إلى العناصر أو لضم التدرجات لإنتاج أسطح مثل الزجاج. يوضح الرسم التوضيحي التالي استخدام قناع الشفافية. استخدام خلفية ملونة لإظهار الأجزاء الشفافة من القناع.

مثال قناع الشفافية

كائن له قناع معتم لـ LinearGradientBrush

إنشاء قناع شفافية

لإنشاء قناع الشفافية قم بإنشاء Brush و تطبيقه إلى خاصية OpacityMask للعنصر أو المرئي. يمكنك استخدام أي نوع من Brush كقناع الشفافية.

  • LinearGradientBrush ،RadialGradientBrush: يستخدم لجعل العنصر أو المرئي يختفي من طريقة العرض.

    تُظهر الصورة التالية LinearGradientBrush المستخدم كقناع شفافية.

    مثال تقنيع شفافية LinearGradientBrush

    كائن له قناع معتم لـ LinearGradientBrush

  • ImageBrush: يستخدم لإنشاء تأثيرات المادة أو حافة ناعمة أو مقطعة.

    تُظهر الصورة التالية ImageBrush المستخدم كقناع شفافية.

    مثال تقنيع شفافية LinearGradientBrush

    كائن له قناع معتم لـ ImageBrush

  • DrawingBrush: يستخدم لإنشاء أقنعة شفافية معقدة من أنماط الأشكال, صور و التدرجات.

    تُظهر الصورة التالية DrawingBrush المستخدم كقناع شفافية.

    مثال تقنيع شفافية DrawingBrush

    كائن له قناع معتم لـ DrawingBrush

الطباشير المتدرج ( LinearGradientBrush و RadialGradientBrush) هم مناسبين بشكل خاص للاستخدام كقناع شفافية. لأن SolidColorBrush يملأ منطقة بلون موحد مما يجعل أقنعة شفافية رديئة; استخدام SolidColorBrush مكافىء لإعداد خاصية OpacityMask التابعة إلى العنصر أو المرئي.

استخدام تدرج كقناع شفافية

لإنشاء تعبئة متدرجة قم بتحديد اثنين أو أكثر من علامات توقف التدرج. تحتوي كل علامة توقف التدرج على وصف اللون و الموضع ( راجع نظرة عامة على الطلاء بالألوان الصلدة و تدرجاتها للحصول على مزيد من المعلومات حول إنشاء واستخدام التدرجات). العملية مماثلة إلى استخدام تدرج كقناع شفافية فيما عدا أنه بدلاً من خلط الألوان, تدرج قناع الشفافية يمزج قيم قناة ألفا. لذا اللون الفعلي لمحتويات التدرج لا تهم; فقط قناة ألفا ، أو الشفافية, من كل لون تهم. فيما يلي مثال.

<!--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>

تحديد توقف التدرج لقناع الشفافية

في المثال السابق اللون معرّف من قبل النظام Black يتم استخدامه كلون بدء التدرج. لأن كافة الألوان في فئة Colors ، فيما عدا Transparent, معتمين كلياً يكمن استخدامه ببساطة لتعريف لون بداية قناع تدرج الشفافية.

للحصول على عنصر تحكم إضافي عبر قيم ألفا عند تعريف قناع الشفافية يمكنك تحديد قناة ألفا من الألوان باستخدام تدوين ARGB ست عشري في العلامات أو باستخدام أسلوب Color.FromScRgb.

تحديد لون معدل الشفافية في "XAML"

في Extensible Application Markup Language (XAML)، يمكنك استخدام ARGBتدوين ست عشري إلى تعيين معدل الشفافية ألوان فردية. ARGBمنهج سداسي عشري باستخدام بناء الجملة التالي:

#aarrggbb

يمثل aa في السطر السابق قيمة رقمين من التدوين السداسى العشري تستخدم لتعيين شفافية اللون. rr , gg و bb كل منهم يمثل قيمة رقمين من التدوين السداسى العشري تستخدم لتحديد مقدار الأحمر ،و الأخضر , و الأزرق في اللون. قد يكون كل رقم ست عشري القيمة من 0-9 أو من A-F. 0 الأصغر القيمة، هو أعظم و F. قيمة ألفا 00 تعين لون شفاف تماماً ، بينما ألفا FF تنشئ لون معتم كلياً. في المثال التالي تدوين ARGB السداسى العشري يُستخدم لتحديد لونين. الأول معتم كلياً ، بينما الثاني شفاف تماماً.

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

استخدام صورة كقناع شفافية

يمكن أيضاً استخدام الصور كقناع شفافية. تظهر الصورة التالية مثال: استخدام خلفية ملونة لإظهار الأجزاء الشفافة من القناع.

مثال قناع الشفافية

كائن له قناع معتم لـ ImageBrush

لاستخدام صورة كقناع الشفافية ، استخدم ImageBrush ليحتوي على الصورة. عند إنشاء صورة ليتم استخدامها كقناع شفافية, احفظ الصورة في تنسيق يدعم عدة مستويات من الشفافية مثل Portable Network Graphics (PNG). يظهر المثال التالي التعليمات البرمجية المستخدمة لإنشاء الرسم التوضيحي السابق.

<!-- 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>

استخدام صورة متجانبة كقناع شفافية

في المثال التالي، يتم استخدام نفس صورة مع ImageBrush آخر، ولكن استخدام ميزات التجانب الخاصة بالفرشاة لإنتاج الإطارات المتجانبة لصورة 50 بكسل مربعة.

<!-- 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>

إنشاء قناع شفافية من رسم

يمكن استخدام الرسومات كقناع شفافية. الأشكال الموجودة ضمن الرسم يمكن ملأها بالتدرجات, الألوان الخالصة, الصور أو حتى الرسومات الأخرى. تُظهر الصورة التالية مثال لرسم مستخدم كقناع شفافية. استخدام خلفية ملونة لإظهار الأجزاء الشفافة من القناع.

مثال تقنيع شفافية DrawingBrush

كائن له قناع معتم لـ DrawingBrush

لاستخدام رسم كقناع شفافية, استخدم DrawingBrush لتحتوي على الرسم. يظهر المثال التالي التعليمات البرمجية المستخدمة لإنشاء الرسم التوضيحي السابق.

<!-- 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>

استخدام رسم متجانب كقناع شفافية

مثل ImageBrush، يمكن جعل DrawingBrush يجانب الرسم الخاص به. في المثال التالي، يتم استخدام فرشاة رسم لإنشاء قناع شفافية متجانب.

<!-- 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>

راجع أيضًا:

المبادئ

رسم صور و رسومات و صور

نظرة عامة على الطلاء بالألوان الصلدة و تدرجاتها