ios - 如何缩放和居中 UIBezierPath？

Question

我正在使用 BezierPath，可以成功地在 View 中制作基本的星形，效果很好。但是， View 的大小可以更改。当 View 大小改变时，我无法将这条贝塞尔路径居中，我设法缩放它，但居中对我来说很难。

private func pointFrom(_ angle: CGFloat, radius: CGFloat, offset: CGPoint) -> CGPoint {
    return CGPoint(x: radius * cos(angle) + offset.x, y: radius * sin(angle) + offset.y)//CGPointMake(radius * cos(angle) + offset.x, radius * sin(angle) + offset.y)
}

private func generateStar(width:CGFloat, height:CGFloat, radius:CGFloat) -> CAShapeLayer{
    let path = UIBezierPath()
    var scale = width / height
    if width > height{
        scale = height / width
    }

    let starExtrusion:CGFloat = 60.0

    let center = CGPoint(x: width / 2.0, y: height / 2.0)

    let pointsOnStar = 5

    var angle:CGFloat = -CGFloat(.pi / 2.0)
    let angleIncrement = CGFloat(.pi * 2.0 / Double(pointsOnStar))
    let radius = width / 2.0

    var firstPoint = true

    for _ in 1...pointsOnStar {

        let point = pointFrom(angle, radius: radius, offset: center)
        let nextPoint = pointFrom(angle + angleIncrement, radius: radius, offset: center)
        let midPoint = pointFrom(angle + angleIncrement / 2.0, radius: starExtrusion, offset: center)

        if firstPoint {
            firstPoint = false
            path.move(to: point)
        }

        path.addLine(to: midPoint)//addLineToPoint(midPoint)
        path.addLine(to: nextPoint)//addLineToPoint(nextPoint)

        angle += angleIncrement
    }
    path.apply(CGAffineTransform(scaleX: scale, y: scale))
    path.close()

    let maskLayer = CAShapeLayer()
    maskLayer.path = path.cgPath

    return maskLayer
}

我怎样才能做到这一点？谢谢!

Answer 1

你的路径的中心用这个命令移动:

path.apply(CGAffineTransform(scaleX: scale, y: scale))

为了让你的center保持在中心，按1/scale缩放，这样当按scale缩放时，它会结束在 View 的中心向上(因为 (1/scale) * scale == 1):

改变:

let center = CGPoint(x: width / 2.0, y: height / 2.0)

到:

let center = CGPoint(x: width / 2.0 / scale, y: height / 2.0 / scale)

这两个缩放比例相互抵消，路径的中心最终位于最初计算的位置。

---

就是说，当 height != width 时，您正在缩小星星。如果您忘记缩放比例并只选择宽度和高度中的最小值作为您的半径计算，您可能会得到更好的结果:

去掉scale，或者设置为1.0，然后

改变:

let radius = width / 2.0

到:

let radius = min(width, height) / 2.0

这将使星星尽可能大，同时仍完全适合 View 。

---

正如您所注意到的，随着恒星变小，它会变“胖”(更圆)。这是因为对于 starExtrusion，您有一个硬编码常量 60.0。该值应基于 radius。

计算半径后设置starExtrusion:

let radius = min(width, height) / 2.0
let starExtrusion = radius * 0.4

您可以改变 0.4 乘数来改变星星的形状。