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

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

استخدام أقنعة القص مع وضع عرض

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

يمكن تطبيق renderMode على العنصرَين Group وPart* في التسلسل الهرمي للمشهد. يرسم عارض خلفية شاشة الساعة العناصر بالترتيب أثناء التنقّل في شجرة المشهد.

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

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

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

يُرجى العِلم أنّ هذا يعني أنّه لا يتم أخذ ترتيب العناصر في العقدة الرئيسية في الاعتبار.

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

  • العنصران الأول والثالث هما عنصران MASK، لذا يتم دمجهما معًا لتكوين طبقة إخفاء.
  • العنصر الثاني هو الطبقة الوحيدة غير المخفية

<PartDraw x="175" y="50" width="100" height="100" renderMode="MASK">
    <Ellipse x="0" y="0" width="100" height="100">
        <Fill color="#FFFFFF" />
    </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="#FFFF00 #00FFFF #FF00FF" positions="0.25 0.5 0.75" />
        </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>
watchface_effects.xml

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

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

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

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

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

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

<PartDraw x="125" y="115" width="150" height="150">
    <Rectangle x="0" y="0" width="150" height="150">
        <Fill color="#ffd3ba" />
    </Rectangle>
</PartDraw>
<PartText x="135" y="160" width="300" height="120">
    <Text align="START">
        <Font family="pacifico" size="96" weight="BOLD" color="#fb5607">Hello!</Font>
    </Text>
</PartText>
watchface_effects.xml

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

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

<PartDraw x="125" y="115" width="150" height="150">
    <Rectangle x="0" y="0" width="150" height="150">
        <Fill color="#ffd3ba" />
    </Rectangle>
</PartDraw>
<PartText x="135" y="160" width="300" height="120" blendMode="SRC_ATOP">
    <Text align="START">
        <Font family="pacifico" size="96" weight="BOLD" color="#fb5607">Hello!</Font>
    </Text>
</PartText>
watchface_effects.xml

يمكن تطبيق تأثيرات أكثر تعقيدًا، مثل استخدام 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>
watchface_effects.xml

الاعتبارات

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

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

إذا كانت العقدة تحتوي على عناصر 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>
watchface_effects.xml

الأداء

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

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

استخدام درجات الألوان

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

<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>
watchface_effects.xml

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