Day14 形狀

在真正進入到Vision Pro的開發前，還有幾個UI元件必須要熟悉，而形狀就是一個很常用到的元件，不管是在畫圖或者畫資料圖，都可以用形狀來去達成。

首先就是矩形Rectangle，例如：

Rectangle()
    .fill(Color.blue)
    .frame(width: 60, height: 60)

在這裡也使用到了屬性fill來填滿藍色，與frame設定寬度與高度。

顯示如圖：

Rectangle也可以加入圓角屬性，例如：

RoundedRectangle(cornerRadius: 10)
    .fill(Color.blue)
    .frame(width: 60, height: 60)

顯示如圖：

Rectangle加入圓角，並且增加邊界線，例如：

RoundedRectangle(cornerRadius: 10)
    .stroke(Color.blue, style: StrokeStyle(lineWidth: 10, lineCap: .round, lineJoin: .round))
    .frame(width: 60, height: 60)

使用屬性stroke來設定邊框的屬性，例如這裡設定邊框顏色為藍色、寬度為10，round表示當邊線遇到轉折處時，會變成圓滑。

顯示如圖：

第二個形狀為圓形Circle，例如：

Circle()
    .fill(Color.blue)
    .frame(width: 60, height: 60)

顯示如圖：

Circle一樣可以增加邊界線，例如：

Circle()
    .stroke(Color.blue, style: StrokeStyle(lineWidth: 10, lineCap: .round, lineJoin: .round))
    .frame(width: 60, height: 60)

顯示如圖：

Ellipse為橢圓形，例如：

Ellipse()
    .fill(Color.blue)
    .frame(width: 60, height: 100)

顯示如圖：

Ellipse增加邊界線，例如：

Ellipse()
    .stroke(Color.blue, style: StrokeStyle(lineWidth: 10, lineCap: .round, lineJoin: .round))
    .frame(width: 60, height: 100)

顯示如圖：

Capsule為類似膠囊的形狀，例如：

Capsule()
    .fill(Color.blue)
    .frame(width: 60, height: 120)

顯示如圖：

Capsule增加邊界線，例如：

Capsule()
    .stroke(Color.blue, style: StrokeStyle(lineWidth: 10, lineCap: .round, lineJoin: .round))
    .frame(width: 60, height: 120)

顯示如圖：

這裡也舉一個簡單使用形狀的例子，使用圓形加入框線並且放大，例如：

Circle()
    .stroke(.blue, style: StrokeStyle(lineWidth: 20, lineCap: .round))
    .frame(width: 237)

顯示如圖：

加入trim可以設定形狀的範圍，例如：

Circle()
    .trim(from: 0, to: 0.8)
    .stroke(.blue, style: StrokeStyle(lineWidth: 20, lineCap: .round))
    .frame(width: 237)

trim從0畫到0.8，而0的位置在三點鐘的方向，然後逆時針方向一直到80%的位置。

顯示如圖：

所以調整一下trim的範圍，修改成0.1到0.9，然後旋轉90度，例如：

Circle()
    .trim(from: 0.1, to: 0.9)
    .stroke(.blue, style: StrokeStyle(lineWidth: 20, lineCap: .round))
    .frame(width: 237)
    .rotationEffect(.degrees(90))

就可以畫出這樣的圖形，顯示如圖：

從 SwiftUI 到 Apple Vision Pro - SwiftUI 從零開始 Day14 [完]