如何扩展 UIBezierPath 弧的外边缘

Question

我正在制作一个带有 4 个 UIBezierArc 的 Simon Says 风格的轮子。我不能只制作一个具有不同颜色和白色部分的弧，因为我需要能够识别按下了哪个弧。

然而，当我将圆弧放置在一个圆圈中时，内边缘之间的白色 space 小于外边缘之间的白色 space 并使 spaces看起来像一个楔形而不是一个统一的矩形。

如何调整外弧边，使其 start/end 角比内弧边长？

private struct Constants {
    static let width: CGFloat = 115;
    static let height: CGFloat = 230;
}

override func draw(_ rect: CGRect) {
    let center = CGPoint(x: bounds.width / 2, y: bounds.height / 2)

    let radius: CGFloat = bounds.height

    let startAngle: CGFloat = 0 + .pi / 44
    let endAngle: CGFloat = .pi / 2 - .pi / 44

    shapePath = UIBezierPath(arcCenter: center,
                            radius: radius/2 - CGFloat(Constants.width/2),
                            startAngle: startAngle,
                            endAngle: endAngle,
                            clockwise: true)

    shapePath.lineWidth = Constants.width / 2
    color.setStroke()
    shapePath.stroke()
    shapePath.close()
}

这是目前的样子：

Answer 1

您将无法使用 4 个粗圆弧部分。那些将有倾斜的末端。

相反，您必须构建 4 个单独的填充多边形，每个多边形具有 2 个圆弧和 2 个线段。

弄清楚它需要一些代数 2 和一点三角学知识。

想象一下您绘图的边界正方形，它具有从左上角到右下角以及从右上角到左下角的给定厚度的条。我们称它们为横杆。想象一下，您使用方形边标记绘制这些横杆，因此横杆从正方形的每个角开始，并且横杆的角稍微伸出边界正方形。图解。

现在在正方形内画出内外径圆。

每个圆圈将与每个条形的外线相交。您将需要求解条形边界线与内圆和外圆的交点。如果横杆的粗细为 t，则横杆角的坐标将从正方形的角偏移 t•√2/4。您需要画出条形图并绘制出横杆外线的坐标。然后记下每个横杆的端点并计算外线的方程。（以截距形式或标准形式。标准形式允许您处理垂直线，但您的情况不会有垂直线。

圆的公式是r² = (x-h)² + (y-k)²。您应该能够对每个圆和每个条形边界线使用联立方程来找到每个条形外线和每个圆的交点。每对应该有 2 个解决方案。

一旦你有了交点的坐标，你就必须使用三角函数来计算每条弧的起点和终点角度。然后，您只需使用 UIBezierPath arc 命令和 line 命令来 assemble 您的形状。

这是基本方法。制定细节是繁琐且耗时的，但很简单。我会把那一点留作 "exercise for the reader."

Answer 2

您可以定义一条路径来包围图表的四个弧形。你只需要将每条曲线的 start/end 角偏移除以半径的间隙的反正弦值。例如

let angleAdjustment = asin(gap / 2 / radius)

因此：

@IBDesignable
class SimonSaysView: UIView {

    @IBInspectable var innerPercentage: CGFloat = 0.5 { didSet { updatePaths() } }
    @IBInspectable var gap: CGFloat = 20              { didSet { updatePaths() } }

    let shapeLayers: [CAShapeLayer] = {
        let colors: [UIColor] = [.red, .blue, .black, .green]
        return colors.map { color -> CAShapeLayer in
            let shapeLayer = CAShapeLayer()
            shapeLayer.strokeColor = UIColor.clear.cgColor
            shapeLayer.fillColor = color.cgColor
            shapeLayer.lineWidth = 0
            return shapeLayer
        }
    }()

    override init(frame: CGRect = .zero) {
        super.init(frame: frame)
        configure()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        configure()
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        updatePaths()
    }

    func configure() {
        shapeLayers.forEach { layer.addSublayer([=11=]) }
    }

    func updatePaths() {
        let arcCenter = CGPoint(x: bounds.midX, y: bounds.midY)
        let outerRadius = min(bounds.width, bounds.height) / 2
        let innerRadius = outerRadius * innerPercentage
        let outerAdjustment = asin(gap / 2 / outerRadius)
        let innerAdjustment = asin(gap / 2 / innerRadius)

        for (i, shapeLayer) in shapeLayers.enumerated() {
            let startAngle: CGFloat = -3 * .pi / 4 + CGFloat(i) * .pi / 2
            let endAngle = startAngle + .pi / 2
            let path = UIBezierPath(arcCenter: arcCenter, radius: outerRadius, startAngle: startAngle + outerAdjustment, endAngle: endAngle - outerAdjustment, clockwise: true)
            path.addArc(withCenter: arcCenter, radius: innerRadius, startAngle: endAngle - innerAdjustment, endAngle: startAngle + innerAdjustment, clockwise: false)
            path.close()
            shapeLayer.path = path.cgPath
        }
    }

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        guard let touch = touches.first else { return }

        for (index, shapeLayer) in shapeLayers.enumerated() {
            if shapeLayer.path!.contains(touch.location(in: self)) {
                print(index)
                return
            }
        }
    }
}

产量：

如果您想知道我如何计算调整角度，θ，对于给定的间隙偏移量 x 和给定半径 r，基本三角学告诉我们 sin(θ) = x / r，因此 θ = asin(x / r) 其中 x 是总差距除以 2。

Answer 3

所以你想要这个：

让我们在 UIBezierPath 上写一个扩展，创建勾勒出单个楔形的路径。

为了热身，首先我们将编写一个函数来创建楔形路径而不在楔形之间留下间隙：

import UIKit
import PlaygroundSupport

// This is useful to remind us that we measure angles in radians, not degrees.
typealias Radians = CGFloat

extension UIBezierPath {

    static func simonWedge(innerRadius: CGFloat, outerRadius: CGFloat, centerAngle: Radians) -> UIBezierPath {
        let innerAngle: Radians = CGFloat.pi / 4
        let outerAngle: Radians = CGFloat.pi / 4
        let path = UIBezierPath()
        path.addArc(withCenter: .zero, radius: innerRadius, startAngle: centerAngle - innerAngle, endAngle: centerAngle + innerAngle, clockwise: true)
        path.addArc(withCenter: .zero, radius: outerRadius, startAngle: centerAngle + outerAngle, endAngle: centerAngle - outerAngle, clockwise: false)
        path.close()
        return path
    }

}

有了这个扩展，我们可以像这样创建楔形：

我们可以在 UIView 子类中使用此扩展来绘制楔形：

class SimonWedgeView: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }

    required init?(coder decoder: NSCoder) {
        super.init(coder: decoder)
        commonInit()
    }

    var centerAngle: Radians = 0 { didSet { setNeedsDisplay() } }
    var color: UIColor = #colorLiteral(red: 0.8549019694, green: 0.250980407, blue: 0.4784313738, alpha: 1) { didSet { setNeedsDisplay() } }

    override func draw(_ rect: CGRect) {
        let path = wedgePath()
        color.setFill()
        path.fill()
    }

    private func commonInit() {
        contentMode = .redraw
        backgroundColor = .clear
        isOpaque = false
    }

    private func wedgePath() -> UIBezierPath {
        let bounds = self.bounds
        let outerRadius = min(bounds.size.width, bounds.size.height) / 2
        let innerRadius = outerRadius / 2
        let path = UIBezierPath.simonWedge(innerRadius: innerRadius, outerRadius: outerRadius, centerAngle: centerAngle)
        path.apply(CGAffineTransform(translationX: bounds.midX, y: bounds.midY))
        return path
    }
}

let rootView = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
rootView.backgroundColor = .white

func addWedgeView(color: UIColor, angle: Radians) {
    let wedgeView = SimonWedgeView(frame: rootView.bounds)
    wedgeView.color = color
    wedgeView.centerAngle = angle
    rootView.addSubview(wedgeView)
}

addWedgeView(color: #colorLiteral(red: 0.8549019694, green: 0.250980407, blue: 0.4784313738, alpha: 1), angle: 0)
addWedgeView(color: #colorLiteral(red: 0.5843137503, green: 0.8235294223, blue: 0.4196078479, alpha: 1), angle: 0.5 * .pi)
addWedgeView(color: #colorLiteral(red: 0.2588235438, green: 0.7568627596, blue: 0.9686274529, alpha: 1), angle: .pi)
addWedgeView(color: #colorLiteral(red: 0.9686274529, green: 0.78039217, blue: 0.3450980484, alpha: 1), angle: 1.5 * .pi)

PlaygroundPage.current.liveView = rootView

结果：

所以现在我们要添加楔形之间的间隙。

考虑这张图：

在图表中，有一个半径为 r 的圆（以原点为中心），以及该圆的弧对着角度 θ。当θ以弧度为单位时，弧的长度为θr。（这个公式，θr，就是我们用弧度来测量角度的原因！）

在上面的无间隙方法中，θ（作为变量innerAngle和outerAngle）是.pi / 4。但是现在我们希望角度小于.pi / 4来形成一个缺口。我们希望沿内径的间隙长度等于沿外径的间隙长度。所以我们有一个预定的间隙长度，g，我们需要为它计算适当的 θ。

gapless arc length = r π / 4
gapful arc length = θ r = r π / 4 - g / 2

（我们用g / 2是因为每个楔子的一端有一半的间隙，另一端有一半的间隙。）

θ r = r π / 4 - g / 2
// Solve for θ by dividing both sides by r:
θ = π / 4 - g / (2 r)

现在我们可以更新扩展中的公式 innerAngle 和 outerAngle，以创建包含间隙的路径：

static func simonWedge(innerRadius: CGFloat, outerRadius: CGFloat, centerAngle: Radians, gap: CGFloat) -> UIBezierPath {
    let innerAngle: Radians = CGFloat.pi / 4 - gap / (2 * innerRadius)
    let outerAngle: Radians = CGFloat.pi / 4 - gap / (2 * outerRadius)
    let path = UIBezierPath()
    path.addArc(withCenter: .zero, radius: innerRadius, startAngle: centerAngle - innerAngle, endAngle: centerAngle + innerAngle, clockwise: true)
    path.addArc(withCenter: .zero, radius: outerRadius, startAngle: centerAngle + outerAngle, endAngle: centerAngle - outerAngle, clockwise: false)
    path.close()
    return path
}

然后我们更新SimonWedgeView的wedgePath方法来计算间隙长度并将其传递给simonWidge方法：

    private func wedgePath() -> UIBezierPath {
        let bounds = self.bounds
        let outerRadius = min(bounds.size.width, bounds.size.height) / 2
        let innerRadius = outerRadius / 2
        let gap = (outerRadius - innerRadius) / 4
        let path = UIBezierPath.simonWedge(innerRadius: innerRadius, outerRadius: outerRadius, centerAngle: centerAngle, gap: gap)
        path.apply(CGAffineTransform(translationX: bounds.midX, y: bounds.midY))
        return path
    }

我们得到了想要的结果：

您可以找到完整的 playground 源代码（对于有漏洞的版本）in this gist。

顺便说一句，在您使 draw 方法生效后，您可能想要检测哪个楔子被敲击了。为此，您需要覆盖 SimonWedgeView 中的 point(inside:with:) 方法。我解释一下要做什么 in this answer.

如何扩展 UIBezierPath 弧的外边缘

How to extend outer edge of UIBezierPath arc

xcode

ios

swift

swift4