ios - 彼此相切的圆。我如何检测哪个圆被点击了？

Question

我创建了一个如下所示的 UIView 子类:

它是由 21 个圆圈组成的三角形。这些圆是彼此的切线。

我想知道在识别出点击手势时触摸了哪个圆圈。具体来说，我想知道触摸的圆圈的行号(0 指顶行，5 指底行)和索引(0 指最左边的圆圈)。

这就是我画圆圈的方式。这段代码 AFAIK 没有任何问题。我提供了这段代码，以便您可以重现我的自定义 UIView。

// This is the frame that I actually draw the circles in, because the view's
// bounds is not always the perfect size. This frame is supposed to be centered in the view's bounds
var actualBoardFrame: CGRect {
    if bounds.width < bounds.height {
        return CGRect(x: 0,
                      y: (bounds.height - bounds.width) / 2,
                      width: bounds.width,
                      height: bounds.width)
            .insetBy(dx: 3, dy: 3)
    } else {
        return CGRect(x: (bounds.width - bounds.height) / 2,
                      y: 0,
                      width: bounds.height,
                      height: bounds.height)
            .insetBy(dx: 3, dy: 3)
    }
}

var circleDiameter: CGFloat {
    return actualBoardFrame.height / 6
}

override func draw(_ rect: CGRect) {
    for row in 0..<board.rowCount {
        for index in 0...row {
            let path = UIBezierPath(ovalIn: CGRect(origin: pointInViewFrame(forCircleInRow: row, atIndex: index), size: size))
            path.lineWidth = 3
            UIColor.black.setStroke()
            path.stroke()
        }
    }

}

// Sorry for the short variable names. I worked this formula out on paper with maths,
// so I didn't bother to write long names
func pointInBoardFrame(forCircleInRow row: Int, atIndex index: Int) -> CGPoint {
    let n = CGFloat(board.rowCount)
    let c = CGFloat(board.rowCount - row - 1)
    let w = actualBoardFrame.width
    let h = actualBoardFrame.height
    let x = (2 * w * CGFloat(index) + w * c) / (2 * n)
    let y = (n - c - 1) * h / n + (c * (circleDiameter / 2) * tan(.pi / 8))
    return CGPoint(x: x, y: y)
}

// This converts the point in the actualBoardFrame's coordinate space
// to a point in the view.bounds coordinate space
func pointInViewFrame(forCircleInRow row: Int, atIndex index: Int) -> CGPoint {
    let point = pointInBoardFrame(forCircleInRow: row, atIndex: index)
    return CGPoint(x: point.x + actualBoardFrame.origin.x, y: point.y + actualBoardFrame.origin.y)
}

我尝试检测哪个圆被触摸的一种方法是:

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    guard let point = touches.first?.location(in: self) else { return }
    let pointInBoardFrame = CGPoint(x: point.x - actualBoardFrame.origin.x, y: point.y - actualBoardFrame.origin.y)
    guard pointInBoardFrame.y >= 0 else { return }

    // This line below makes an incorrect assumption
    let touchedRow = Int(pointInBoardFrame.y / circleDiameter)
    let rowStart = self.pointInBoardFrame(forCircleInRow: touchedRow, atIndex: 0).x
    let rowEnd = self.pointInBoardFrame(forCircleInRow: touchedRow, atIndex: touchedRow).x + circleDiameter
    guard pointInBoardFrame.x >= rowStart && pointInBoardFrame.x <= rowEnd else { return }
    let touchedIndex = Int((pointInBoardFrame.x - rowStart) / circleDiameter)


    print("touched circle: \(touchedRow) \(touchedIndex)")
}

上面的代码不起作用，因为它做出了错误的假设，即点击的 y 坐标可用于明确确定触摸的行。这不是真的，因为存在穿过两行的水平线。

我该怎么做？

Answer 1

这两种方法都需要 O(1) 的时间，但第一种很吃内存。

简单的解决方案:用相同的圆圈制作隐藏图片，但用特定颜色绘制每个圆圈，例如:R component = row index, G component = index in the row。点击时，将坐标转换为该图片并获取该点的颜色值。

---

数学解决方案:

在 u-v 向量的基础上表示抽头坐标。

s3 = Sqrt(3)
u = (-R, R*s3)
v = (R, R*s3)

每个笛卡尔点(x,y)(相对于顶部圆的中心，OY 轴向下!)可以表示为线性组合

x = a * ux + b * vx
y = a * uy + b * vy

我们需要得到a和b的系数

multiply and subtract
x * uy = a * ux * uy + b * vx * uy
y * ux = a * uy * ux + b * vy * ux
x * uy - y * ux = b * (vx * uy - vy * ux)
b = (x * uy - y * ux) / (vx * uy - vy * ux)
x * vy - y * vx = a * (ux * vy - uy * vx)
a = (y * vx  - x * vy)/ (vx * uy - vy * ux)

分母是常数，所以公式很简单

denom = vx * uy - vy * ux = R * R * s3 + R * S3 * R =  2 * R^2 * s3 

a = (y * R - x * R*s3) / (2 * R^2 * s3) = - x / (2*R) + y / (2*R*s3)
b  = (x * R * s3 +  y * R ) / (2 * R^2 * s3) = x / (2*R) +  y / (2*R*s3)

在计算a 和b 后将它们四舍五入到最接近的整数并得到行/索引:

aa = round(a)
bb = round(b) 
row = a + b
index = b

示例:

R = 2
x = 2, y = 3.4 (near right center on my picture)
a = 0  b = 1
row = 1  index = 1

x = -2, y = 3.4  (near left center on my picture)
a = 1  b = 0 
row = 1  index = 0