UIBezierPath 围绕 UIView 的中心旋转

Question

我正在创建一个自定义 UIView，在其中我通过使用 UIBezierPath 绘制一个宽度较大的圆来实现它的 draw(rect:) 方法，在顶部绘制一个正方形（如中所示图片，不要考虑颜色或尺寸）。然后我尝试创建正方形的旋转副本，以匹配 "settings" 图标（图 2，仅考虑外环）。为了做最后一件事，我需要使用 CGAffineTransform(rotationAngle:) 旋转正方形，但问题是这个旋转的中心是框架的原点，而不是圆的中心。如何在我的视图中围绕某个点创建旋转？

Answer 1

改变变换的原点，旋转，向后移动

应用你的转换

Answer 2

作为@DuncanC 回答的演示（已投票），下面是使用 CGAffineTransforms 使轮齿绕圆心旋转的齿轮图：

class Gear: UIView {
    var lineWidth: CGFloat = 16
    let boxWidth: CGFloat = 20
    let toothAngle: CGFloat = 45

    override func draw(_ rect: CGRect) {

        let radius = (min(bounds.width, bounds.height) - lineWidth) / 4.0

        var path = UIBezierPath()
        path.lineWidth = lineWidth
        UIColor.white.set()

        // Use the center of the bounds not the center of the frame to ensure
        // this draws correctly no matter the location of the view
        // (thanks @dulgan for pointing this out)
        let center = CGPoint(x: bounds.maxX / 2, y: bounds.maxY / 2)

        // Draw circle
        path.move(to: CGPoint(x: center.x + radius, y: center.y))
        path.addArc(withCenter: CGPoint(x: center.x, y: center.y), radius: radius, startAngle: 0, endAngle: 2 * .pi, clockwise: true)
        path.stroke()

        // Box for gear tooth
        path = UIBezierPath()
        let point = CGPoint(x: center.x - boxWidth / 2.0, y: center.y - radius)
        path.move(to: point)
        path.addLine(to: CGPoint(x: point.x, y: point.y - boxWidth))
        path.addLine(to: CGPoint(x: point.x + boxWidth, y: point.y - boxWidth))
        path.addLine(to: CGPoint(x: point.x + boxWidth, y: point.y))
        path.close()
        UIColor.red.set()

        // Draw a tooth every toothAngle degrees
        for _ in stride(from: toothAngle, through: 360, by: toothAngle) {
            // Move origin to center of the circle
            path.apply(CGAffineTransform(translationX: -center.x, y: -center.y))

            // Rotate
            path.apply(CGAffineTransform(rotationAngle: toothAngle * .pi / 180))

            // Move origin back to original location
            path.apply(CGAffineTransform(translationX: center.x, y: center.y))

            // Draw the tooth
            path.fill()
        }
    }
}

let view = Gear(frame: CGRect(x: 0, y: 0, width: 200, height: 200))

这里是运行在操场上：

Answer 3

如果你想要一个使用 UIViews 的快速 n 脏版本：

UIView * dialView = [UIView new];
dialView.frame = CGRectMake(0, localY, w, 300);
dialView.backgroundColor = [UIColor whiteColor];
[analyticsView addSubview:dialView];

float lineWidth = 6;
float lineHeight = 20.0f;
int numberOfLines = 36;
for (int n = 0; n < numberOfLines; n++){

    UIView * lineView = [UIView new];
    lineView.frame = CGRectMake((w-lineWidth)/2, (300-lineHeight)/2, lineHeight, lineWidth);
    lineView.backgroundColor = [UIColor redColor];
    [dialView addSubview:lineView];

    lineView.transform = CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(360/numberOfLines*n));
    lineView.transform = CGAffineTransformTranslate(lineView.transform, (150-lineHeight), 0);

}

给予：

其中w为支架宽度，弧度计算公式为：

#define DEGREES_TO_RADIANS(degrees)((M_PI * degrees)/180)

UIBezierPath 围绕 UIView 的中心旋转

UIBezierPath Rotation around a UIView's center

ios

swift

uibezierpath

cgaffinetransform