如何旋转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
相关产品推荐
相关产品推荐

