퓨즈[Fusetools] 문서[Docs] 번역

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. 레이아웃
  4. 요소[Element]

요소[Element]

Element 클래스

요소(Element)는 사각형 2D 영역을 덮는 비주얼입니다.

공통 속성(Common properties)

HitTestMode

요소와 상호 작용할 때 상호 작용할 수 있는 요소를 구별하는 것이 좋을 때가 있습니다. 이를 일반적으로 “히트 테스트[hit testing]”라고 합니다. 퓨즈에서 요소가 사용자 입력과 어떻게 상호 작용하는지 HitTestMode를 사용하여 설정할 수 있습니다.

예제

이 예제에서는 두 개의 Rectangle을 레이아웃하고 Clicked 트리거를 둘 다 추가합니다. 그러나 히트 테스트가 오른쪽 사각형에는 비활성화되어 있으므로 왼쪽 사각형을 클릭했을 때만 출력됩니다:

1
2
3
4
5
6
7
8
9
10
11
12
<Grid ColumnCount="2">
    <Rectangle Width="100" Height="100" Fill="#808" >
        <Clicked>
            <DebugAction Message="Clicked left" />
        </Clicked>
    </Rectangle>
    <Rectangle Width="100" Height="100" Fill="#808" HitTestMode="None" >
        <Clicked>
            <DebugAction Message="Clicked right" />
        </Clicked>
    </Rectangle>
</Grid>

시각적 요소가 하위 요소를 가려서 하위 요소가 입력에 응답하도록 하려는 경우 매우 유용할 수 있습니다.

ClipToBounds

요소를 다른 요소 내부에 배치하더라도 내부 요소를 부모 요소 크기 외부에 자유롭게 배치할 수 있습니다:

1
2
3
4
<Panel Width="100" Height="100">
        <Image Margin="-100" File="Pictures/Picture1.jpg"
            StretchMode="UniformToFill" />
</Panel>

패널이 경계선을 기준으로 이미지를 클리핑하지 않기 때문에 이미지의 너비는 300pt이고 세로가 길게 나타납니다.

이미지 클립을 부모 크기만큼만 보이게 만들려면 Panel에서 ClipToBounds=”true”로 설정하면 됩니다:

1
2
3
4
<Panel Width="100" Height="100" ClipToBounds="true">
    <Image Margin="-100" File="Pictures/Picture1.jpg"
        StretchMode="UniformToFill" />
</Panel>

이제 이미지는 패널 경계를 넘지 않습니다.

Opacity

Opacity 속성을 사용하여 객체의 투명도를 설정할 수 있습니다. Opacity=”0″이면 요소가 완전히 투명합니다.

예제

이 예제에서 패널의 불투명도는 0.5로 설정됩니다.

1
2
3
<Panel>
    <Opacity Value="0.5" />
</Panel>

Layers

기존 컨트롤의 모양을 재정의하는 것이 도움이 되는 경우가 많습니다. 컨테이너에 추가되는 요소는 다른 레이어에 할당될 수 있습니다. 빨간색 배경으로 버튼을 표시하려면 Background 레이어를 다시 정의할 수 있습니다.

1
2
3
<Button Text="Hello!">
    <Rectangle Fill="#931" Layer="Background" />
</Button>

이 버튼의 레이아웃이나 동작은 변경되지 않지만 모양이 변경됩니다.

사용 가능한 Element 클래스

링크로 대신합니다: https://www.fusetools.com/docs/fuse/elements/element#available-element-classes

Element의 인터페이스

링크로 대신합니다: https://www.fusetools.com/docs/fuse/elements/element#section-table-of-contents

Was this article helpful to you? Yes No

How can we help?