SwiftUI의 사용자 지정 육각형 모양

SwiftUI에서 사용자 정의 모양을 만드는 것은 매우 쉽습니다. 높은 수준에서 Shape 프로토콜을 충족하려면 정의하기만 하면 됩니다path(in rect: CGRect) -> Path . 모양 자체는 View를 준수하므로 모양을 만드는 동안 모양의 XCode에서 미리 볼 수도 있습니다.

우리는 이 모양을 육각형이라고 부르지만 실제로는 정육각형을 만들고 있습니다. 즉 모든 면과 각도가 동일하다는 의미입니다. 6개의 정삼각형으로 된 육각형을 만들고 싶은 유혹을 느낄 수 있지만 약간의 삼각법을 사용하면 실제로 더 간단합니다. x 좌표는 중심점 + 반경 × 코사인(π × 점의 인덱스), y 좌표는 중심점 + 반경 × 사인(π × 점의 인덱스)을 취하여 각 모서리를 계산할 수 있습니다.

경계 사각형이 주어졌으므로 해당 사각형의 중심이 육각형의 중심이 되는 것을 찾습니다.

let center = CGPoint(x: rect.midX, y: rect.midY)

반지름은 높이 또는 너비 중 더 작은 값을 2로 나눈 값입니다.

let radius = min(rect.size.height, rect.size.width) / 2

육각형의 각 정점에 대해 CGPoint의 배열을 반환하여 모서리를 계산하는 데 사용할 수 있습니다.

func corners(center: CGPoint, radius: CGFloat) -> [CGPoint] {
    var points: [CGPoint] = []
    for i in (0...5) {
      let angle = CGFloat.pi / 3 * i
      let point = CGPoint(
        x: center.x + radius * cos(angle),
        y: center.y + radius * sin(angle)
      )
      points.append(point)
    }
    return points
}

마지막으로 path 함수에서 필요한 경로를 실제로 구축하기 위해 경로( var path = Path() )를 생성하고 첫 번째 정점으로 이동합니다: path.move(to: corners[0] 그런 다음 점을 반복하여 path.addLine(to: point)를 호출합니다. 각각. 마지막으로 path.closeSubpath()를 호출하여 개요를 완성하고 경로를 반환할 수 있습니다.

모든 것을 하나로 모으기:

struct Hexagon: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        let center = CGPoint(x: rect.midX, y: rect.midY)
        let radius = min(rect.size.height, rect.size.width) / 2
        let corners = corners(center: center, radius: radius)
        path.move(to: corners[0])
        corners[1...5].forEach() { point in
            path.addLine(to: point)
        }
        path.closeSubpath()
        return path
    }

    func corners(center: CGPoint, radius: CGFloat) -> [CGPoint] {
        var points: [CGPoint] = []
        for i in (0...5) {
          let angle = CGFloat.pi / 3 * CGFloat(i)
          let point = CGPoint(
            x: center.x + radius * cos(angle),
            y: center.y + radius * sin(angle)
          )
          points.append(point)
        }
        return points
    }
}

모양은 SwiftUI에서 직접 사용할 수 있습니다. 다른 보기에 바로 보기로 추가하여 이미지를 잘라내고(예를 들어 이미지 URL에 너무 많은 돈과 전기를 소비했음을 증명하려는 경우) 색상, 크기 조정 등