AppleWatch版和時計 アラビアインデックス

アラビア インデックスを付けてみた！

• 今回は、時計の文字盤に1から24までのアラビア数字を用いたインデックスです

ソースを追加

• 前回のソースにコードを追加しました yshigu.hatenablog.com

• 24回ループを追加

  • 一周360度に24回アラビア数字を書くので15度づつ角度を付けています
    • .degrees( Double(i) * 15.0 )
  • 最初はの文字は「０」でなく「２４」にしました
    • if i == 0 { "24" }else{ "(i)" }

ForEach(0..<24) { i in
    if i == 0 {
        ys_mojiban( angle: .degrees( Double(i) * 15.0 ), jikan: "24")
    }else{
        ys_mojiban( angle: .degrees( Double(i) * 15.0 ), jikan: "\(i)")
    }

• インデックス表示部分を追加
  • バーを書きます
    • ys_mojiban_sen(width: 4, height: 66)
  • バーの属性にオーバーレイして数字を入れます
    • .overlay(Text(jikan)
    • 注）Text(jikan)のまま書くと怒られる！　

 //24 time
    func ys_mojiban(angle: Angle, jikan : String ) -> some View{
        ys_mojiban_sen(width: 4, height: 66)
            .fill(Color(red: 0.2, green: 0.3, blue: 0.9))
            .frame(width: 24, height: 40)
            .offset(x: 6, y: 20)
            .overlay(
                 Text(jikan)
                    .rotationEffect(  - angle - .degrees(6) )
                     .font(.system(size: 16))
                     .foregroundColor(.white)
                     .offset(x: -8, y: -73)
                 )
            //課題：どうして６度傾けるか
             .rotationEffect(angle + .degrees(6))
    }
    func ys_mojiban_sen(width: CGFloat, height: CGFloat) -> some Shape {
        Path { path in
            path.move(to: CGPoint(x: 0, y: -height*0.9))
            path.addLine(to: CGPoint(x: -width*0.5, y: -height*0.9))
            path.addLine(to: CGPoint(x: -width*0.5, y: -height))
            path.addLine(to: CGPoint(x:  width*0.5, y: -height))
            path.addLine(to: CGPoint(x:  width*0.5, y: -height*0.9))
            path.closeSubpath()
        } 
    }