You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.09 16:07:11