UIBezierPath 围绕 UIView 的中心旋转

Question

I'm creating a custom UIView , in which I implement its draw(rect:) method by drawing a circle with a large width using UIBezierPath, that draw a square on the top (as shown in the picture, don't consider the colors or the size). Then I try creating rotated copies of the square, to match a "settings" icon (picture 2, consider only the outer ring). To do that last thing, I need to rotate the square using a CGAffineTransform(rotationAngle:) but the problem is that this rotation's center is the origin of the frame, and not the center of the circle. How can I create a rotation around a certain point in my view?

Answer 1

As a demonstration of @DuncanC's answer (up voted), here is the drawing of a gear using CGAffineTransform s to rotate the gear tooth around the center of the circle:

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))

---

Here it is running in a Playground:

Answer 2

Shift the origin of your transform, Rotate, Shift back

Apply your transform

Answer 3

If you want a quick n dirty version using UIViews instead:

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);

}

Giving:

Where w is a holder width, and radians are calculated by:

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

Answer 4

Maybe would help someone. Source

extension UIBezierPath {
    func rotate(degree: CGFloat) {
        let bounds: CGRect = self.cgPath.boundingBox
        let center = CGPoint(x: bounds.midX, y: bounds.midY)

        let radians = degree / 180.0 * .pi
        var transform: CGAffineTransform = .identity
        transform = transform.translatedBy(x: center.x, y: center.y)
        transform = transform.rotated(by: radians)
        transform = transform.translatedBy(x: -center.x, y: -center.y)
        self.apply(transform)
    }
}

Example:

let progressLayerPath = UIBezierPath(ovalIn: CGRect(x: 0,
                                                    y: 0,
                                                    width: 70,
                                                    height: 70))
progressLayerPath.rotate(degree: -90) // <-------
progressLayer.path = progressLayerPath.cgPath
progressLayer.strokeColor = progressColor.cgColor
progressLayer.fillColor = UIColor.clear.cgColor
progressLayer.lineWidth = lineWidth
layer.addSublayer(progressLayer)