SwiftUI—通过Path路径绘制不规则的线条和图形

简介: SwiftUI—通过Path路径绘制不规则的线条和图形

使用Path,并配合move和addLine绘制自定义的图形

示例代码:


Path { path in //首先添加一个路径,在闭包语句里进行路径形状的定义
   path.move(to: CGPoint(x: 30, y: 0)) //将路径的起点移到此处的坐标位置,也就是水平坐标为30,垂直坐标为0的位置
   path.addLine(to: CGPoint(x: 30, y: 200)) //然后通过addLine方法,从路径的起点,绘制一条直线,直线的终点坐标为{30, 200}
   path.addLine(to: CGPoint(x: 230, y: 200)) //接着从点{30, 200}开始,向右侧绘制一条直线,直线的终点坐标为{230, 200}。
    path.addLine(to: CGPoint(x: 230, y: 0)) //继续向上方绘制一条直线,直线的终点坐标为{230, 0}。
    path.move(to: CGPoint(x: 30, y: 300))
    path.addQuadCurve(to: CGPoint(x: 230, y: 300), control: CGPoint(x: 130, y: 450)) //通过addQuadCurve添加四边形曲线命令,绘制一条贝塞尔曲线,曲线的终点位于(230,300),曲线的控制点位于(130,450)
    path.addQuadCurve(to: CGPoint(x: 330, y: 300), control: CGPoint(x: 280, y: 220))
}
Path { path in
    path.addEllipse(in: CGRect(x: 100, y: 30, width: 200, height: 200)) //将椭圆移到当前路径位置
    path.addRoundedRect(in: CGRect(x: 100, y: 120, width: 200, height: 200), cornerSize: CGSize(width: 10, height: 10)) //加圆角矩形到当前路径
    path.addEllipse(in: CGRect(x: 100, y: 210, width: 200, height: 200))
}



2466108-15f8de46d532c9f4.webp.jpg


2466108-cc2fa65a682f8dd0.webp.jpg


目录
相关文章
|
1月前
|
移动开发 前端开发 JavaScript
html5 Canvas 绘制基本图形 从直线图形到使用路径 - 直线、矩形、路径、多边形、复杂组合图形
html5 Canvas 绘制基本图形 从直线图形到使用路径 - 直线、矩形、路径、多边形、复杂组合图形
149 0
html5 Canvas 绘制基本图形 从直线图形到使用路径 - 直线、矩形、路径、多边形、复杂组合图形
|
1月前
|
监控 API 计算机视觉
OpenCV这么简单为啥不学——1.4、基础标识绘制(绘制线line函数、rectangle函数绘制四边形、circle函数绘制圆形、putText函数绘制文字、putText绘制中文文字)
OpenCV这么简单为啥不学——1.4、基础标识绘制(绘制线line函数、rectangle函数绘制四边形、circle函数绘制圆形、putText函数绘制文字、putText绘制中文文字)
38 0
|
1月前
|
计算机视觉
OpenCV(十三):图像中绘制直线、圆形、椭圆形、矩形、多边形和文字
OpenCV(十三):图像中绘制直线、圆形、椭圆形、矩形、多边形和文字
53 0
|
8月前
cesium中绘制立方体、设置材质、操作相机及获取鼠标经纬度和高度的方法
cesium中绘制立方体、设置材质、操作相机及获取鼠标经纬度和高度的方法
136 0
|
定位技术
Cesium系列:加载不规则形状出图
Cesium加载不规则形状出图
304 0
|
定位技术
Threejs使用Shapes实现不规则几何体,自定义绘图
Threejs使用Shapes实现不规则几何体,自定义绘图
834 0
Threejs使用Shapes实现不规则几何体,自定义绘图
|
前端开发 JavaScript
使用SVG实现动态分布的圆环发散路径动画
使用SVG实现动态分布的圆环发散路径动画
235 0
SwiftUI—如何将颜色、图片和图形作为视图的背景
SwiftUI—如何将颜色、图片和图形作为视图的背景
750 0
SwiftUI—如何将颜色、图片和图形作为视图的背景
|
计算机视觉
Qt实用技巧:图形视图框架中图元将矩形边界改为不规则边界(用于选取和碰撞)
Qt实用技巧:图形视图框架中图元将矩形边界改为不规则边界(用于选取和碰撞)
Qt实用技巧:图形视图框架中图元将矩形边界改为不规则边界(用于选取和碰撞)
|
前端开发 数据可视化
canvas绘制折线路径动画
canvas绘制折线路径动画
canvas绘制折线路径动画