如何在SwiftUI中绘制由箭头组成的五角星?
箭头五角星实现方案
方案一:批量定位单个箭头
- 先通过极坐标计算五角星5个顶点的精确坐标:设外接圆半径为R,第n个顶点(n=0~4)坐标为
(R*cos(72°*n + 18°), R*sin(72°*n + 18°)),18°偏移是让五角星正立。 - 每个箭头的朝向对应相邻顶点的连线方向:比如从顶点A到顶点B,箭头尖端指向B,箭头的旋转角度等于向量AB的方向角。
- 复用你的Arrow Shape时,调整箭头杆长为五角星边长的90%左右,把箭头的起点放在A点往B点方向偏移杆长的位置,尖端刚好落在AB边上,逐个放置5个箭头即可。
方案二:给五角星边补箭头
- 先绘制缩短版五角星框架:每条边的长度比原五角星短一段(等于箭头杆部的长度),确保每条边末端留出箭头的位置。
- 用向量计算箭头位置:取每条边的端点P1(起点)、P2(终点),算出单位方向向量
(P2-P1)/|P2-P1|,箭头尖端固定在P2,翼点通过旋转该单位向量±30°(可调整张角)后乘以翼长,再加上P2坐标得到,直接绘制箭头多边形或复用Arrow Shape贴在对应位置。
微弯箭头的简化实现
不用纠结addArc或addCurve的复杂路径,用三次贝塞尔曲线快速实现:
- 箭头杆部:以杆的起点和终点为贝塞尔曲线的两个端点,在杆的垂直方向(比如偏移杆长的5%)设置一个控制点,就能得到自然的微弯效果。
- 箭头翼部:用短贝塞尔曲线连接杆尾和翼点,控制点同样往弯曲方向偏移,保持整体弧度一致。
内容的提问来源于stack exchange,提问作者user22321262
相关产品推荐
相关产品推荐

