SwiftUIで6角形を作りたい。

Question

6角形を作る方法を教えてください。

中の色はGradient
外枠はoverlay

説明不足ですが、お力を貸してください。。

完成図がこちらです。

Comments

[退会済みユーザー]

回答について全く無反応ですがどうされたのでしょうか

Answer 1

画像をみるかぎりは正六角形でいいのでしょうか？

正六角形にかぎりませんが、SwiftUI で図形を描くには Shape プロトコルを採用する構造体をつくります。

path(in:) メソッドを書く必要があり、そこで好きな図形を描画します。

struct MyShape: Shape {
  func path(in rect: CGRect) -> Path {
    Path { path in
      // rect で描画領域が取得でき、
      // path で描画する
    }
  }
}

---

正六角形を描くかんたんな方法は、まん丸の円周を 360 度ぐるりと回るときの、60 度きざみの点を直線で結ぶことです。

円周の上の点の座標は、円の原点、半径、角度の三つがわかれば、三角比のサイン・コサインを使って求められます。

func pointOnCircle(origin: CGPoint, radius: CGFloat, angle: CGFloat) -> CGPoint {
  let x = origin.x + radius * cos(angle * CGFloat.pi / 180.0)
  let y = origin.y + radius * sin(angle * CGFloat.pi / 180.0)
  return CGPoint(x: x, y: y)
}

---

実際に正六角形を表現する Shape は次のようになります。

struct Hexagon: Shape {
  func path(in rect: CGRect) -> Path {
    Path { path in
      let origin = CGPoint(x: rect.midX, y: rect.midY)
      let radius = min(rect.size.width / 2.0, rect.size.height / 2.0)
      let angles: [CGFloat] = [150.0, 210.0, 270.0, 330.0, 30.0, 90.0]
      let startPoint = self.pointOnCircle(origin: origin, radius: radius, angle: angles.last!)
      path.move(to: startPoint)
      for angle in angles {
        let point = self.pointOnCircle(origin: origin, radius: radius, angle: angle)
        path.addLine(to: point)
      }
      path.closeSubpath()
    }
  }
  
  private func pointOnCircle(origin: CGPoint, radius: CGFloat, angle: CGFloat) -> CGPoint {
    let x = origin.x + radius * cos(angle * CGFloat.pi / 180.0)
    let y = origin.y + radius * sin(angle * CGFloat.pi / 180.0)
    return CGPoint(x: x, y: y)
  }
}

---

Hexagon は他の Shape と同じように使います。正六角形の形状しかあらわしていないので、色を塗ったりしないとみえません。

import SwiftUI

struct ContentView: View {
  var body: some View {
    Hexagon()
      .foregroundColor(Color.black)
  }
}

この六角形に画像のようなグラデーションの六角形をオーバーレイで描くには、.overlay で少し小さく（.padding を追加）した六角形をセットすればよいです。

import SwiftUI

struct ContentView: View {
  var body: some View {
    let lightOrangeColor = Color(red: 0.97, green: 0.3, blue: 0)
    let orangeColor      = Color(red: 0.97, green: 0.76, blue: 0)
    let linerGradient = LinearGradient(
      gradient: Gradient(colors: [lightOrangeColor, orangeColor]),
      startPoint: .top,
      endPoint: .bottom
    )
    
    Hexagon()
      .foregroundColor(Color.black)
      .overlay(
        Hexagon().fill(linerGradient).padding(12),
        alignment: .center
      )
  }
}

はい、できあがり！