이 페이지는 Cloud Translation API를 통해 번역되었습니다.

마스크, 블렌드 효과, 색조 적용

Group 및 Part* 요소는 시계 화면 섹션의 모양을 조정하는 강력한 방법인 tintColor, renderMode 및 blendMode 속성도 제공합니다.

렌더링 모드에서 클리핑 마스크 사용

renderMode는 클리핑 마스크를 구현하기 위해 WFF 버전 1에서 도입되었습니다.

renderMode는 장면 계층 구조의 Group 및 Part* 요소에 적용할 수 있습니다. 작동 방식을 가장 잘 이해하려면 장면 그래프가 렌더링되는 방식을 고려해 보세요.

<Group>
  <Group>
    <PartDraw />
    <PartText />
  </Group>
  <PartImage />
</Group>

시계 화면 렌더러는 장면 트리를 탐색하는 동안 요소를 순서대로 그립니다.

renderMode가 노드에 적용되면 효과는 해당 노드의 상위 Group 내에만 적용됩니다. 그래프의 다른 위치에 있는 다른 노드는 영향을 받지 않습니다.

renderMode를 지정하지 않으면 기본값은 SOURCE이므로 요소가 화면에 직접 그려집니다. 그러나 상위 노드에 MASK (또는 ALL)가 지정된 요소가 하나 이상 있는 경우 다른 접근 방식이 사용됩니다.

오프스크린 캔버스가 생성됩니다.
SOURCE가 설정된 모든 하위 요소 (기본값)가 그려집니다.
1. 마스크 (MASK, ALL)의 일부인 모든 하위 요소가 캔버스에 적용되어 결과 이미지를 자릅니다.

즉, 상위 노드의 요소 순서는 고려되지 않습니다.

다음 예에서 Scene 상위 요소에는 세 개의 하위 요소가 포함되어 있습니다.

첫 번째와 세 번째 요소는 MASK 요소이므로 함께 결합되어 마스킹 레이어를 형성합니다.
두 번째 요소는 유일한 마스킹되지 않는 레이어입니다.

<WatchFace width="450" he>igh<t=&qu>ot;45<0"
  Scene
    PartDraw x="175" y="50" wi>dth=&qu<ot;100" height="100" renderMo>de="<MASK"
      Ell><ipse >x="<;0"> y=&q<uot;0&quo>t; wid<th="100" height="100"
   >     Fi<ll color="#FFFFFF"/Fill
      /Ellip>se
    /P<artDraw

    PartDra>w x="0<" y="0" width="450" height="450"
      Rectangle x="0" y>="0&<quot;> width=<"450&>quot;< height=&>quot;4<50"
        Fill color="#ff0000"
          LinearG>radient< startX="0&quo>t; startY<="0" endX="450" endY="450"
     >      < colors=&quo<t;...>"<; positio>ns=<">.<.." />
        /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

SOURCE 및 MASK 외에 renderMode의 세 번째 옵션은 ALL입니다. ALL는 요소가 SOURCE 및 MASK로 모두 취급되어야 함을 지정합니다. 이는 일부 시나리오에서 유용할 수 있습니다.

블렌딩 모드 사용

참고: 이 기능은 워치 페이스 형식 버전 3 이상에서 사용할 수 있습니다.

버전 3부터 워치 페이스 형식은 Part* 요소를 컴포지션할 때 혼합 모드를 적용하는 기능을 제공합니다.

소스와 마스크를 각각 구성하기 위한 특수 메커니즘을 도입하는 renderMode와 달리 blendMode는 모든 Android 그래픽 혼합 모드 효과에 대한 일반 액세스를 제공하고 요소가 장면 그래프에 표시되는 순서대로 효과를 적용합니다.

정상 작동 시 두 개의 Part* 요소가 장면에 배치되면 기본 blendMode가 SRC_OVER이므로 최상위 요소가 하위 요소를 가리키거나 부분적으로 가립니다.

<PartDraw x="25" y="15" widt>h=&<quot;150" height="150"
  Rectan>gle x<="0" y=">;0&<quot; widt>h<="15>0<" height="150"
    Fill color=&q>uot<;#ffd3ba" /
 > /Rec<tangle
/PartDraw
PartText x="35" y="60" wi>dth=&q<uot;3>00&<quot;> <height=&q>uot;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" widt>h=&<quot;150" height="150"
  Rectan>gle x<="0" y=">;0&<quot; widt>h<="15>0<" height="150"
    Fill color="#ffd3ba" /
 > /R<ectangle
/PartDraw>
Part<Text x="35" y="60" width="300" h>eight=<">;12<0&quo>t<; blendMo>de="SRC_ATOP"
  Text align="START"
    Font family="pacifico" size="96" weight="BOLD" color="#fb5607"Hello!/Font
  /Text
/PartText

SRC_ATOP 대신 COLOR_DODGE를 사용하여 소스를 반영하도록 대상을 더 밝게 만드는 등 더 복잡한 효과를 적용할 수 있습니다.

HUE 및 COLOR_BURN 블렌딩 모드를 사용하여 여러 Part* 요소를 결합하는 예는 다음과 같습니다.

<Group name="container" x="75" y="100&>quo<t; width="300" height="300">
  Pa<rtDraw x="25" y="15" width>="<150" height=">;150&<quot;
    >Rec<tangle x=>&qu<ot;0" y="0" width="150" height="15>0&quo<t;
      Fill color="#ffd3ba" /
  >  /Rect<angle
  /PartDraw
  Pa>rtDra<w x=&quo>t;1<00" >y=&<quot;15" width="150" height="150" blendMode=&>quot;<HUE"
    Elli>pse x=&<quot;0" y="0" width="150" height=&quo>t;150&<quot;>
    <  Fill c<olor=&quo>t<;#219e>bc" /
    /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

고려사항

다음 섹션에서는 클리핑 및 혼합 효과를 사용할 때 유의해야 할 몇 가지 고려사항을 설명합니다.

혼합 모드가 렌더링 모드 전에 적용됨

노드에 blendMode를 사용하는 Part 요소와 MASK (또는 ALL)로 설정된 renderMode를 사용하는 Part 요소가 모두 포함된 경우 다음 접근 방식이 사용됩니다.

소스가 blendMode 모드 적용을 포함하여 컴포지션됩니다.
그런 다음 rendermode="MASK를 지정하는 요소에서 마스크가 적용됩니다."

예를 들어 이전에 사용한 예시를 고려하고 직사각형 마스크를 추가합니다. 마스크된 요소의 순서는 중요하지 않습니다.

<Group name="container" x="75" y="100&>quo<t; width="300" height="300">
  Pa<rtDraw x="25" y="15" width>="<150" height=">;150&<quot;
    >Rec<tangle x=>&qu<ot;0" y="0" width="150" height="15>0&quo<t;
      Fill color="#ffd3ba" /
  >  /Rect<angle
  /PartDraw
  Pa>rtDra<w x=&quo>t;1<00" >y=&<quot;15" width="150" height="150" blendMo>de=&q<uot;HUE"
    Ellipse x="0" y=&q>uot;0&q<uot; width="150&q>uot; <height=&qu>ot;<150">
  <    Fill color="#219ebc" /
    /Ellipse
  /PartDraw
  PartDr>aw x=<"100" y=>"1<5" width="150" height="150" renderMod>e=&quo<t;MAS>K&quo<t;
  >  R<ectangle >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" he>igh<t=&qu>ot;45<0"
  Scene
    Group x="75" y="100" width="350&qu>ot; hei<ght="350" name="group1" ti>ntColor=&<quot;#ffd3ba"
      PartDraw x="25&q>uot; y=&quo<t;0" width=">100"< height=&q>uot;100<"
  >      R<ectangle x="0" y="0" width=>"100<" height="100"
          Fill >color="<;#ffffff" /
     >   /Recta<ngle
   >   /Par<tDraw
   >   Part<Draw x="150" y="0" width=&>quot;100&<quot; height=">100"
 <       Ellipse x="25" y="0" width="10>0"<; hei>ght="<;100&>quot;
 <         >Fill <color=>&qu<ot;#ff>f<fff" >/
        /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]").

마스크, 블렌드 효과, 색조 적용 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.