تطبيق الأقنعة ومزج التأثيرات والألوان

توفّر عناصر Group وPart* أيضًا سمتَي tintColor, renderMode و blendMode اللتين تُعدّان طريقتَين فعّالتين لتعديل مظهر أقسام خلفية شاشة الساعة.

استخدام أقنعة القطع مع وضع التقديم

تم تقديم renderMode في الإصدار 1 من WFF لتحقيق قناع اقتصاص.

يمكن تطبيق renderMode على عناصر Group وPart* في التسلسل الهرمي للمشهد. لفهم آلية عمل ذلك بشكل أفضل، فكِّر في كيفية عرض الرسم البياني للمشهد:

<Group>
  <Group>
    <PartDraw />
    <PartText />
  </Group>
  <PartImage />
</Group>
 INSERT ALT TEXT HERE

يرسم برنامج عرض خلفية شاشة الساعة العناصر بالترتيب أثناء التنقّل في شجرة المشهد.

عند تطبيق renderMode على عقدة، لا ينطبق التأثير إلا ضمن العقدة الرئيسية Group لهذه العقدة. ولا تتأثّر العقد الأخرى في أي مكان آخر من الرسم البياني.

في حال عدم تحديد renderMode، تكون القيمة التلقائية هي SOURCE، ما يعني أنّه يتم رسم العنصر على الشاشة مباشرةً. ومع ذلك، عندما يكون هناك عنصر واحد أو أكثر في العقدة الرئيسية مع تحديد MASK (أو ALL)، يتم استخدام أسلوب مختلف:

  1. يتم إنشاء لوحة رسم خارج الشاشة
  2. يتمّ رسم جميع العناصر الثانوية التي تمّ ضبطها على SOURCE (وهو الإعداد التلقائي).
    1. يتم تطبيق جميع العناصر الفرعية التي تشكّل جزءًا من القناع (MASK, ALL) على لوحة الرسم لقص الصورة الناتجة.

يشير ذلك إلى أنّه لا يتم أخذ ترتيب العناصر في العقدة الرئيسية في الاعتبار.

في المثال التالي، يحتوي العنصر الرئيسي Scene على ثلاثة عناصر فرعية:

  • العنصران الأول والثالث هما من عناصر MASK، لذا يتم دمجهما معًا لإنشاء طبقة حجب.
  • العنصر الثاني هو الطبقة الوحيدة غير المخفية.
<WatchFace width="450" height="450">
  <Scene>
    <PartDraw x="175" y="50" width="100" height="100" renderMode="MASK">
      <Ellipse x="0" y="0" width="100" height="100">
        <Fill color="#FFFFFF"></Fill>
      </Ellipse>
    </PartDraw>

    <PartDraw x="0" y="0" width="450" height="450">
      <Rectangle x="0" y="0" width="450" height="450">
        <Fill color="#ff0000">
          <LinearGradient startX="0" startY="0" endX="450" endY="450"
            colors="..." positions="..." />
        </Fill>
      </Rectangle>
    </PartDraw>

    <PartText x="75" y="250" width="300" height="80" renderMode="MASK">
      <Text align="CENTER">
        <Font family="pacifico" size="72" weight="BOLD" color="#FFFFFF">Hello!</Font>
      </Text>
    </PartText>
  </Scene>
</WatchFace>

الخيار الثالث لرمز renderMode بالإضافة إلى SOURCE وMASK هو ALL. تشير القيمة ALL إلى أنّه يجب التعامل مع العنصر على أنّه SOURCE وMASK، ما قد يكون مفيدًا في بعض السيناريوهات.

استخدام وضع المزج

ملاحظة: تتوفّر هذه الميزة في الإصدار 3 من تنسيق خلفية شاشة الساعة والإصدارات الأحدث.

بدءًا من الإصدار 3، يتيح لك تنسيق خلفية شاشة الساعة إمكانية تطبيق وضع دمج عند إنشاء عناصر Part*.

على عكس renderMode الذي يقدّم آلية خاصة لإنشاء المصدر والقناع على التوالي، يقدّم blendMode إمكانية وصول عامة إلى كل تأثيرات وضع المزج في رسومات Android، ويطبّق التأثيرات بالترتيب الذي تظهر فيه العناصر في الرسم البياني للمشهد.

في الوضع العادي، عند وضع عنصرَين من النوع Part* في المشهد، يحجب العنصر العلوي العنصر السفلي أو يحجبه جزئيًا لأنّ قيمةblendMode التلقائية هي SRC_OVER.

<PartDraw x="25" y="15" width="150" height="150">
  <Rectangle x="0" y="0" width="150" height="150">
    <Fill color="#ffd3ba" />
  </Rectangle>
</PartDraw>
<PartText x="35" y="60" width="300" height="120">
  <Text align="START">
    <Font family="pacifico" size="96" weight="BOLD" color="#fb5607">Hello!</Font>
  </Text>
</PartText>

كعرض توضيحي لاستخدام أوضاع المزج، يؤدي اختيار SRC_ATOP إلى تجاهل وحدات البكسل المصدر التي لا تغطي وحدات البكسل الوجهة. على وجه التحديد، فإنّ PartText هو المصدر، والوجهة هي PartDraw.

ونتيجةً لذلك، يتم رسم النص فوق المستطيل فقط، وليس في أي مكان آخر على خلفية شاشة الساعة:

<PartDraw x="25" y="15" width="150" height="150">
  <Rectangle x="0" y="0" width="150" height="150">
    <Fill color="#ffd3ba" />
  </Rectangle>
</PartDraw>
<PartText x="35" y="60" width="300" height="120" blendMode="SRC_ATOP">
  <Text align="START">
    <Font family="pacifico" size="96" weight="BOLD" color="#fb5607">Hello!</Font>
  </Text>
</PartText>

يمكن تطبيق تأثيرات أكثر تعقيدًا، مثل استخدام COLOR_DODGE بدلاً من SRC_ATOP، ما يجعل الوجهة أكثر سطوعًا لتعكس المصدر.

مثال على دمج عناصر Part* متعددة باستخدام وضعَي الدمج HUE و COLOR_BURN:

<Group name="container" x="75" y="100" width="300" height="300">
  <PartDraw x="25" y="15" width="150" height="150">
    <Rectangle x="0" y="0" width="150" height="150">
      <Fill color="#ffd3ba" />
    </Rectangle>
  </PartDraw>
  <PartDraw x="100" y="15" width="150" height="150" blendMode="HUE">
    <Ellipse x="0" y="0" width="150" height="150">
      <Fill color="#219ebc" />
    </Ellipse>
  </PartDraw>
  <PartText x="35" y="60" width="300" height="120" blendMode="COLOR_BURN">
    <Text align="START">
      <Font family="pacifico" size="96" weight="BOLD" color="#fb5607">Hello!</Font>
    </Text>
  </PartText>
</Group>
INSERT ALT TEXT HERE

بدون أي تأثيرات blendMode

 INSERT ALT TEXT HERE

مع blendMode تأثير

الاعتبارات

توضِّح الأقسام التالية بعض النقاط التي يجب مراعاتها عند استخدام تأثيرات الاقتصاص والمزج.

يتم تطبيق وضع الدمج قبل وضع العرض.

إذا كانت إحدى العقد تحتوي على عناصر Part تستخدم عناصر blendMode وPart باستخدام renderMode مضبوطًا على MASK (أو ALL)، يتم اتّباع النهج التالي.

  1. يتم دمج المصدر، بما في ذلك تطبيق أوضاع blendMode
  2. ويتم بعد ذلك تطبيق القناع من العناصر التي تحدّد rendermode="MASK".

على سبيل المثال، لنفترض أنّنا نستخدم المثال السابق ونضيف قناعًا مستطيلاً، مع العلم أنّ ترتيب العنصر المُخفَّى لا يهمّ:

<Group name="container" x="75" y="100" width="300" height="300">
  <PartDraw x="25" y="15" width="150" height="150">
    <Rectangle x="0" y="0" width="150" height="150">
      <Fill color="#ffd3ba" />
    </Rectangle>
  </PartDraw>
  <PartDraw x="100" y="15" width="150" height="150" blendMode="HUE">
    <Ellipse x="0" y="0" width="150" height="150">
      <Fill color="#219ebc" />
    </Ellipse>
  </PartDraw>
  <PartDraw x="100" y="15" width="150" height="150" renderMode="MASK">
    <Rectangle x="0" y="0" width="150" height="150">
      <Fill color="#ffffff" />
    </Rectangle>
  </PartDraw>
  <PartText x="35" y="60" width="300" height="120" blendMode="COLOR_BURN">
    <Text align="START">
      <Font family="pacifico" size="96" weight="BOLD" color="#fb5607">Hello!</Font>
    </Text>
  </PartText>
</Group>

الأداء

يتطلب استخدام renderMode وblendMode خطوات حساب و رسم إضافية. استنادًا إلى الجهاز الذي تعمل عليه خلفية شاشة الساعة، قد يتم تنفيذ بعض هذه الإجراءات بكفاءة في الأجهزة المتوافقة، ولكن قد لا يكون ذلك ممكنًا على الأجهزة القديمة.

لهذا السبب، يجب استخدام renderMode وblendMode بحكمة مع الانتباه إلى أثر استخدامهما على الأداء العام لخلفية شاشة الساعة.

استخدام الألوان المطفأة

يمكن تطبيق tintColor على العنصر Part* بالكامل أو Group أو اليد الفردية مثل HourHand وMinuteHand، على سبيل المثال:

<WatchFace width="450" height="450">
  <Scene>
    <Group x="75" y="100" width="350" height="350" name="group1" tintColor="#ffd3ba">
      <PartDraw x="25" y="0" width="100" height="100">
        <Rectangle x="0" y="0" width="100" height="100">
          <Fill color="#ffffff" />
        </Rectangle>
      </PartDraw>
      <PartDraw x="150" y="0" width="100" height="100">
        <Ellipse x="25" y="0" width="100" height="100">
          <Fill color="#ffffff" />
        </Ellipse>
      </PartDraw>
      <PartText x="0" y="150" width="300" height="80">
        <Text align="CENTER">
          <Font family="pacifico" size="72" weight="BOLD" color="#ffffff">Hello!</Font>
        </Text>
      </PartText>
    </Group>
  </Scene>
</WatchFace>

يمكن أن يكون ذلك مفيدًا لتصميم قسم كامل من خلفية شاشة الساعة، بما في ذلك تطبيق النمط من إعدادات المستخدم، على سبيل المثال: tintcolor="[CONFIGURATION.myThemeColor.0]".