SwiftUIでいこう！- スタンフォード大学Lecture 6: Shape

カードのデザインを変えていきます。まずどんなものにするかというと

絵文字のバックに欠けた円形を入れていきます。

簡単に円形をカードの中央に配置するにはカードの形などを決めている

struct CardView:View {} の中に

if card.isFaceUp{
　　　省略
Circle().padding(5).opacity(0.5)
　　　省略
}

追加してやればある程度の余白を持った透明円形が出てきます。

これは先ほどの目指した少し欠けた円形ではないので構造体を別に作って定義してやります。それには新規ファイルを作って構造体を作り引数で欲しい形の図形描画させるように組んでいきます。ここでは

struct Pie:Shape {}

と名付けてコードを入れていきます。

Path()を使い図形を書いていきますがひつような数字を定義します。

var startAngle:Angle
var endangle:Angle

開始角度と終了角度を定義しています

ここで、Angle()を使いますがこの使い方としては

【SwiftUI】Angle構造体の使い方

角度を指定することができます。通常よく使う角度（度数法）またはラジアン（弧度法）どちらも指定できます。使い方は

Angle(degrees: Double)  ・・・　　角度
Angle(radians: Double)  ・・・ラジアン

とDoubleの値として数字を入れます。

例えば角度90 度、1ラジアン を指定してみます。

Angle(degrees: 90) 
Angle(radians: 1) 

と書くことができます。回転させる場合は

 Image(systemName: "img.png")
.rotationEffect(Angle(degrees: 90))

という感じで書いてやれば表示されている画像が回転します。

さて、円形の描画方法に戻りますが、円形を作る方法としてはメソッドを使います。

func addArc(withCenter center: CGPoint, 
    radius: CGFloat, 
startAngle: CGFloat, 
  endAngle: CGFloat, 
 clockwise: Bool)

Apple Developer Documentation

を使います。日本語の解説は以下のサイトが丁寧でわかりやすいです。

この世でいちばんわかりやすいSwiftUIのパス描画 - Qiita

引数となる数字を取得します。

   let center = CGPoint(x:rect.midX,y:rect.midY)
       let radius = min(rect.width,rect.height) / 2
       let start = CGPoint(
           x:center.x + radius * CGFloat(cos(startAngle.radians)),
           y:center.y + radius + CGFloat(sin(startAngle.radians))
       )

実際に描画していきます。

  var p = Path()
       p.move(to: center)
       p.addLine(to:start)
       p.addArc(center: center, radius: radius, startAngle: startAngle, endAngle: endangle, clockwise: !clockWised)

最終的なコードは。

    func path(in rect:CGRect) -> Path {
       
       let center = CGPoint(x:rect.midX,y:rect.midY)
       let radius = min(rect.width,rect.height) / 2
       let start = CGPoint(
           x:center.x + radius * CGFloat(cos(startAngle.radians)),
           y:center.y + radius + CGFloat(sin(startAngle.radians))
       
       )
       
       
       var p = Path()
       p.move(to: center)
       p.addLine(to:start)
       p.addArc(center: center, radius: radius, startAngle: startAngle, endAngle: endangle, clockwise: !clockWised)
       
       
       return p
   }