[SwiftUI-기초] ImagePaint - 이미지를 배경색처럼 사용하기

• 이미지를 배경처럼 사용하면 장점이 반복되는 무늬를 입맛에 맞게 넣을 수 있다는 장점이 있음

Text("Hello World")
    .frame(width: 300, height: 300)
    .background(Image("Example"))

• 이렇게 사용할 수도 있는데 테두리에 사진을 반복되게 넣으려면 어떻게 하면 좋을까? 

Text("Hello World")
    .frame(width: 300, height: 300)
    .border(Image("Example"), width: 30)

• 위 코드는 작동하지 않음
• 테두리에 이미지를 넣는 개념을 구현하기 위해 ImagePaint 가 있음

Text("Hello World")
    .frame(width: 300, height: 300)
    .border(ImagePaint(image: Image("Example"), scale: 0.2), width: 30)

• ImagePaint 는 파라미터를 3가지를 받을 수 있음
• 1. Image: 당연하게도 이미지를 받음
• 2. scale: 해당이미지의 원본의 규격의 배율을 받음. 위 그림에선 원본 사진의 1/5 비율
• 3. sourceRect: 0이 시작, 1이 끝. 원본 이미지의 비율을 조정

Text("Hello World")
            .frame(width: 300, height: 300)
            .border(ImagePaint(image: Image("Example"), sourceRect: CGRect(x: 0, y: 0.25, width: 1, height: 1), scale: 0.1), width: 30)

Text("Hello World")
            .frame(width: 300, height: 300)
            .border(ImagePaint(image: Image("Example"), sourceRect: CGRect(x: 0, y: 0.25, width: 1, height: 0.5), scale: 0.1), width: 30)

• width, height: 너비는 원본 이미지만큼을 유지하되, 높이는 그 절반을 보여줌
• x, y: 이미지가 보여지기 시작하는 원점,
  • x: 0.5,y: 0.0: 중앙 절반에서 오른쪽 만큼을 보여줌
  • x: 0.5,y: 0.5: 좌표계 4사분면 위치를 보여줌

 

Capsule()
    .strokeBorder(ImagePaint(image: Image("Example"), scale: 0.1), lineWidth: 20)
    .frame(width: 300, height: 200)

• Color, gradients, 가 들어갈 수 있는 자리에 다 들어갈 수 있는 모습