Swift UI -unit 2 drawing

學習記錄 SWIFT UI

step 1 創造六邊型的struct

import CoreGraphics

Core Graphics是一個使用Quartz作為繪圖引擎並且基於C語言的API框架。它提供了低層級、輕量級、高保真的2D渲染。我們可以利用這個框架來處理基於路徑的繪畫、變形、顏色管理、脫離屏幕的渲染、模版、漸變、遮罩、圖像創建及管理以及PDF文件的創建、顯示和分析。

CGPoint
不變的圖形路徑，定義二维坐標中的點。 初始化、屬性、方法。

• CGPoint（x：CGFloat，y：CGFloat）
  该初始化程序使用由x和y属性指定的坐标来创建CGPoint结构。 该结构定义了初始化程序，以根据Int，CGFloat和Double类型的值创建实例。

前一條結束為初始點 start Point
控制 Bezier Path
控制曲線 control point

• .addLine：這是畫直線的方法，就是從現在的位置，畫直線到目的地的位置，使用這方式最少需要加兩個點，若是只有起點與一個點，並不會畫出直線
• .addQuadCurve : 這是畫曲線的方法，利用控制點(controlPoint)改變直線的弧度，將目前現在的位置到目的地的位置之間的直線，使用控制點的離直線的遠近改變成曲線。

• .addCurve : 這也是畫曲線的方法，但是控制點(controlPoint)有兩個，所以可以畫出S型的曲線。

let startPoint = CGPoint(x: 0, y: 512)
path.move(to: startPoint)
path.addCurve(to: CGPoint(x: 1023, y: 512), controlPoint1: CGPoint(x: 256, y: 256), controlPoint2: CGPoint(x: 768, y: 768))

• .addArc
  startAngle與endAngle的角度，這裡是需要使用弧度，而 180 度等於弧度 pi ，因此 CGFloat.pi / 180 等於1度的弧度。clockwise為true時則是順時針畫圓，false則是逆時針畫圓。所以簡單說就是360度，圓弧就是起點的度數到終點的度數，看是順時針畫圓還是逆時針畫圓，將兩個度數中間用圓弧連在一起。

let startPoint = CGPoint(x: 0, y: 512)
path.move(to: startPoint)
path.addArc(center: CGPoint(x: 512, y: 512), radius: 512, startAngle: CGFloat.pi / 180 , endAngle: CGFloat.pi / 180 * 270, clockwise: false)

• .fill
  填充顏色 /顏色/開始點/結束點

.fill(LinearGradient( gradient: Gradient(colors: [Self.gradientStart, Self.gradientEnd]), startPoint: UnitPoint(x: 0.5, y: 0), endPoint: UnitPoint(x: 0.5, y: 0.6) ))

• .stroke
  點與點的線

.stroke(lineWidth:5)

tips: 不能同時呼叫 fill & stroke

• Aspect Ratio
  視圖寬度隨著屏幕寬度變化拉伸時,讓其高度自動進行等比例拉伸.保持該視圖寬高比不變.

GeometryReader

一个容器，根據自身大小和座標空間定義其內容。

在GeometryProxy中有兩種計算屬性，一個方法，和一個是取值。

public var size: CGSize { get } //size属性是父層建議的大小
public var safeAreaInsets: EdgeInsets { get } //安全區域
public func frame(in coordinateSpace: CoordinateSpace) -> CGRect
public subscript<T>(anchor: Anchor<T>) -> T where T : Equatable { get }

取得座標尺寸的關鍵在以下程式

.overlay(
     GeometryReader(content: { geometry in
        Text(geometry.frame(in: .global).debugDescription)
            .background(Color.yellow)
     })
)

參考

• .rotationEffect
  控制角度

func rotationEffect(_ angle: Angle, anchor: UnitPoint = .center) -> some View

• .scaledToFit
  佔滿可用空間，且完整顯示
• .aspectRatio(contentMode: .fit)
  讓圖片維持比例並佔滿空間的