SwiftUI常用的Path构造器
SwiftUI常用的Path构造器

SwiftUI常用的Path构造器

Path 有许多类似的方法和构造器,可以创建各种几何形状。以下是常用的构造器和方法分类与用法。

Path构造器

1、Path()

创建一个空路径,然后通过方法动态添加形状。

用法

let path = Path { path in
    path.move(to: CGPoint(x: 10, y: 10))
    path.addLine(to: CGPoint(x: 50, y: 10))
    path.addLine(to: CGPoint(x: 50, y: 50))
    path.closeSubpath() // 闭合路径
}

效果:动态绘制路径,比如多边形。

2、Path(ellipseIn:)

创建一个椭圆或圆。

参数

CGRect:定义椭圆所在的矩形边界。

用法

let ellipsePath = Path(ellipseIn: CGRect(x: 20, y: 20, width: 100, height: 50))

效果:在 (20, 20) 绘制一个宽 100、高 50 的椭圆。

3、Path(rect:)

用于创建一个矩形路径。

参数

rect: CGRect —— 矩形的边界框。

示例

let rectPath = Path(rect: CGRect(x: 10, y: 10, width: 100, height: 50))

创建一个起点在 (10, 10),宽为 100,高为 50 的矩形路径。

4、Path(roundedRect:cornerSize:style:)

用于创建一个带圆角的矩形路径。

参数

roundedRect: CGRect —— 矩形的边界框。

cornerSize: CGSize —— 圆角的宽度和高度。

style: RoundedCornerStyle —— 圆角样式(如 .continuous 或 .circular)。

示例

let roundedRectPath = Path(
    roundedRect: CGRect(x: 10, y: 10, width: 100, height: 50),
    cornerSize: CGSize(width: 10, height: 10),
    style: .continuous)

创建一个带圆角的矩形。

5、Path(CGRect)

和 Path(rect:) 类似,但这是通过传入一个 CGRect 构造路径。

示例

let simpleRectPath = Path(CGRect(x: 10, y: 10, width: 100, height: 50))

效果:绘制矩形。

6、Path(lines:)

用于连接一组点,创建一个多边形路径。

参数

[CGPoint] —— 一组点的数组。

示例

let polygonPath = Path { path in
    path.addLines([
        CGPoint(x: 50, y: 0),
        CGPoint(x: 100, y: 50),
        CGPoint(x: 50, y: 100),
        CGPoint(x: 0, y: 50),
        CGPoint(x: 50, y: 0)
    ])
}

创建一个菱形路径。

7、Path(arcCenter:radius:startAngle:endAngle:clockwise:)

用于创建一段弧形或完整圆形路径。

参数

arcCenter: CGPoint —— 圆弧的中心点。

radius: CGFloat —— 圆弧的半径。

startAngle: Angle —— 起始角度。

endAngle: Angle —— 结束角度。

clockwise: Bool —— 是否顺时针绘制。示例

let arcPath = Path { path in
    path.addArc(center: CGPoint(x: 50, y: 50),
        radius: 40,
        startAngle: .degrees(0),
        endAngle: .degrees(270),
        clockwise: true)
}

创建一个从 0° 到 270° 的弧形。

8、Path(cgPath:)

基于 CGPath 创建路径。

参数

CGPath:Core Graphics 的路径对象。

用法

let cgPath = CGMutablePath()
cgPath.move(to: CGPoint(x: 10, y: 10))
cgPath.addLine(to: CGPoint(x: 50, y: 50))
let path = Path(cgPath)

效果:将 Core Graphics 的路径转换为 SwiftUI 的路径。

Path 的其他动态绘制方法

除了构造器,Path 支持以下动态绘制方法,用于构建更复杂的路径:

1、move(to:):移动到指定点,开始新子路径。

2、addLine(to:):从当前点绘制直线到指定点。

3、addQuadCurve(to:control:):绘制二次贝塞尔曲线。

4、addCurve(to:control1:control2:):绘制三次贝塞尔曲线。

5、addArc(center:radius:startAngle:endAngle:clockwise:):绘制弧形或完整圆。

6、addRect(_:):向路径中添加矩形。

7、addEllipse(in:):向路径中添加椭圆。

8、closeSubpath():闭合当前子路径。

总结

Path 构造器提供了丰富的工具,适合快速创建各种几何形状。可以直接使用构造器如 ellipseIn 或 rect,也可以通过动态方法 move(to:)、addLine(to:) 等构建复杂路径。灵活性非常高,是 SwiftUI 图形绘制的核心组件之一。

相关文章

SwiftUI绘制自定义形状的Path:https://fangjunyu.com/2024/12/16/swiftui%e7%bb%98%e5%88%b6%e8%87%aa%e5%ae%9a%e4%b9%89%e5%bd%a2%e7%8a%b6%e7%9a%84path/

如果您认为这篇文章给您带来了帮助,您可以在此通过支付宝或者微信打赏网站开放者。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注