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

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. 프리미티브[Primitives]
  4. 이미지[Image]

이미지[Image]

Image 클래스

이미지를 표시합니다.

이미지는 퓨즈의 이미지 작업을 위한 몇 가지 기능을 제공하며 몇 가지 간단한 예를 통해 살펴 보겠습니다.

파일 또는 URL에서 이미지 표시:

1
2
3
4
<StackPanel>
    <Image File="some_file.png" />
    <Image Url="some_url" />
</StackPanel>

파일에서 다중 밀도(multi-density) 이미지 표시:

1
2
3
4
5
6
7
8
9
10
<StackPanel>
    <Image Files="logo.png, logo@2x.png, logo@4x.png" />
    <Image>
        <MultiDensityImageSource>
            <FileImageSource Density="1" File="logo.png" />
            <FileImageSource Density="2" File="logo@2x.png" />
            <FileImageSource Density="3" File="logo@4x.png" />
        </MultiDensityImageSource>
    </Image>
</StackPanel/>

URL에서 다중 밀도(multi-density) 이미지 표시:

1
2
3
4
5
6
7
8
9
<StackPanel>
    <Image>
        <MultiDensityImageSource>
            <HttpImageSource Density="1" Url="..." />
            <HttpImageSource Density="2" Url="...@2x" />
            <HttpImageSource Density="3" Url="...@4x" />
        </MultiDensityImageSource>
    </Image>
</StackPanel>

JavaScript에서 지정한 파일의 이미지 표시

우노는 자바스크립트에서 경로가 정의될 때 이미지를 자동으로 묶을(bundle) 수 없습니다. 이 때문에 수동으로 unproj 파일에 수동으로 가져와서 묶어야 합니다. 하나의 파일을 다음과 같이 묶을 수 있습니다:

1
2
3
4
"Includes": [
    "*",
    "image.jpg:Bundle"
]

또는 와일드 카드를 사용하여 전체 폴더 또는 특정 유형의 모든 파일을 묶을 수 있습니다:

1
2
3
"Includes": [
    "*.jpg:Bundle"
]

여기에 프로젝트와 함께 파일 묶기에 대한 자세한 내용을 볼 수 있습니다.

이미지 파일을 번들로 묶어서 다음과 같이 자바스크립트에서 참조할 수 있습니다:

1
2
3
4
5
6
<JavaScript>
    module.exports = {
        image: "image.jpg"
    };
</JavaScript>
<Image File="{image}" />

Image의 인터페이스

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

Was this article helpful to you? Yes No

How can we help?