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

如何旋转UIBezierPath绘制的椭圆?多种尝试均未成功

解决椭圆旋转后消失的问题

你遇到的问题核心是旋转的坐标系原点不对——直接对UIBezierPath应用旋转变换时,默认是绕屏幕左上角(UIKit坐标系原点)旋转的,你的椭圆原本在(100,100)位置,旋转后整个图形就被转出了可见区域,所以看不到。下面给你两种靠谱的解决方案:

方法一:调整路径的旋转中心(修改路径本身)

这种方式需要先把椭圆的中心平移到坐标系原点,旋转后再平移回去,确保旋转是绕椭圆自身中心进行的:

// 先定义椭圆的矩形区域,方便计算中心
let ovalRect = CGRect(x: 100, y: 100, width: 10, height: 15)
let ovalPath = UIBezierPath(ovalIn: ovalRect)

// 计算椭圆的中心坐标
let centerPoint = CGPoint(x: ovalRect.midX, y: ovalRect.midY)

// 组合变换:先移到原点 → 旋转 → 移回原中心
let transform = CGAffineTransform(translationX: -centerPoint.x, y: -centerPoint.y)
    .rotated(by: CGFloat.pi / 3)
    .translatedBy(x: centerPoint.x, y: centerPoint.y)

ovalPath.apply(transform)

// 添加到CAShapeLayer显示
let note = CAShapeLayer()
note.path = ovalPath.cgPath
note.fillColor = UIColor.black.cgColor
view.layer.addSublayer(note)

方法二:给CAShapeLayer设置变换(更推荐)

不需要修改路径,直接给layer添加旋转变换即可。CAShapeLayer的默认锚点是自身中心((0.5,0.5)),所以旋转会自动绕椭圆中心进行,操作更简单:

let ovalRect = CGRect(x: 100, y: 100, width: 10, height: 15)
let ovalPath = UIBezierPath(ovalIn: ovalRect)

let note = CAShapeLayer()
note.path = ovalPath.cgPath
note.fillColor = UIColor.black.cgColor
// 设置layer的frame为椭圆的矩形,确保锚点在中心
note.frame = ovalRect
// 应用3D旋转变换(最后三个参数是旋转轴,这里绕Z轴转)
note.transform = CATransform3DMakeRotation(CGFloat.pi / 3, 0, 0, 1)

view.layer.addSublayer(note)

另外提一句:你代码里先调用了ovalPath.fill(),这是直接在当前图形上下文绘制椭圆,和后面的CAShapeLayer是独立的两个渲染流程,如果只是想显示layer里的椭圆,这个fill()可以去掉~

内容的提问来源于stack exchange,提问作者Poseyyyy

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.05.29 07:56:10