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

Answer 2

只需遍历您的圆圈，看看击中点和中心之间的距离是多少，如果小于半径，那么您就知道在该圆圈中点击了。

例如，根据您在draw(_:)中的迭代方式，您可以执行以下操作：

func identifyCircle(for point: CGPoint) {
    let radius = size.width / 2

    for row in 0..<board.rowCount {
        for index in 0...row {
            let origin = pointInViewFrame(forCircleInRow: row, atIndex: index)
            let center = CGPoint(x: origin.x + size.width / 2, y: origin.y + size.height / 2)
            let distance = hypot(center.x - point.x, center.y - point.y)
            if distance <= radius {
                print(Date(), "tapped in \(row), \(index)")
            }
        }
    }
}

例如

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

    identifyCircle(for: point)
}

无论您使用触摸方法还是手势识别器，实际上都不重要。但这是确定CGPoint落入哪个圆圈的一种方法。

注意，这假设我们正在与圈子打交道。如果没有，您可能想依靠UIBezierPath的{{3}}方法。

Answer 3

绘制圆时分配标签编号，并使用Follow方法获取圆标签编号，这样您就可以得到攻丝的圆。

@objc func circleTapped(_ sender: UITapGestureRecognizer) { //Atul added on 13 Dec 2018
        print("Tapped circle tag number is: ",(sender.view?.tag)!)
    }

彼此相切的圆。如何检测点击了哪个圆圈？

3 个答案: