仅在蒙版视图内识别触摸事件

Question

我通过蒙版创建这个结构：

每个六边形都应该是可点击的。这是我使用的代码：

    // To create one masked hexagun

    let hex = UIImage(named: "hexum")
    let mask = CALayer()
    mask.contents = hexum!.CGImage
    mask.frame = CGRectMake(0, 0, hex!.size.width, hex!.size.height)

    let img = UIImageView(image: UIImage(named: "img"))
    img.layer.mask = mask
    img.layer.masksToBounds = true

    // Gesture Recognizer

    let singleTap = UITapGestureRecognizer(target: self, action: "tapDetected")
    singleTap.numberOfTapsRequired = 1
    img.addGestureRecognizer(singleTap)
    img.userInteractionEnabled = true

    func tapDetected() {
        print("Clicked!")
    }

问题是点击区域大于掩模，这将导致区域彼此重叠的不便。像这样的东西：

黄色边框显示可点击区域（实际上不可见）

我是初学者，这可能是一个微不足道的问题，但你可以帮我解决一下吗？谢谢。

Answer 1

如果你想完美地做到这一点，请使用UIGestureRecognizerDelegate方法gestureRecognizer(gesture, shouldReceiveTouch: touch) -> Bool。您需要将给定的手势识别器映射到特定的六边形，然后对该六边形的图像进行像素精确的命中测试。后一部分是通过将掩模图像渲染到图形上下文并在对应于触摸位置的点处找到像素来实现的。

然而，这可能是矫枉过正的。您可以通过对每个形状进行点击测试来简化问题，而不是六边形。圆形大致近似于六边形，因此它对用户来说几乎相同，并避免了凌乱的像素级alpha等式。触摸输入的不准确性将掩盖不准确的区域。

另一种选择是根据CAShapeLayer面具重新设计您的视图。 CAShapeLayer包括path财产。 UIKit中的Bezier路径包括它们自己的路径包含点方法的滚动版本，因此您可以将其用于此目的。

Answer 2

您可以采用UIGestureRecognizerDelegate协议，并实施gestureRecognizer(_:shouldReceiveTouch:)方法以进一步约束手势是否应该触发。 @tnylee建议的链接将是一个很好的起点，可以确定如何进行此类命中测试。

Answer 3

@Benjamin Mayo为解决这个问题提供了很好的选择。我最终选择了最简单但最有效的方法：将每个形状作为圆圈进行测试。

我正在使用可以帮助其他人的代码：

class hexum: UIImageView {

    var maskFrame: CGRect?

    convenience init(mask: String, inside: String) {

    // Mask things:

        let masked = CALayer()
        let img = UIImage(named: mask)
        masked.contents = img?.CGImage
        masked.frame = CGRectMake(x, y, img!.size.width, img!.size.height)

        self.init(image: UIImage(named: inside))
        self.layer.mask = masked
        self.layer.masksToBounds = true

        maskFrame = masked.frame

    }

    // The touch event things
    // Here, I got help from @Matt in (http://stackoverflow.com/a/21081518/3462518):

    override func pointInside(point: CGPoint, withEvent event: UIEvent?) -> Bool {
        let p = UIBezierPath(ovalInRect: maskFrame!)
        return p.containsPoint(point)
    }
}

    let firstOne = hexum(mask: "img1", inside: "img2")
    let tap = UITapGestureRecognizer(target: self, action: "clicked")
    tap.numberOfTapsRequired = 1

    firstOne.userInteractionEnabled = true
    firstOne.addGestureRecognizer(tap)

    func clicked() {
    ...
    }

结果：

Answer 4

我不确定这是最简单和最正确的方式，但我会检查用户点击的位置并覆盖touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?)。

Answer 5

这是一个Swift 3 HexagonImageView，可以在六边形内部进行点击：

首先创建一个UIBezierpath：

final class HexagonPath: UIBezierPath {
required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

var sideLength: CGFloat = 100 {
    didSet {
        redrawPath()
    }
}

override init() {
    super.init()
    redrawPath()
}

private func redrawPath() {
    removeAllPoints()

    let yDrop = sideLength / 2

    move(to: CGPoint(x: sideLength, y: 0))

    addLine(to: CGPoint(x: sideLength * 2, y: yDrop))
    addLine(to: CGPoint(x: sideLength * 2, y: yDrop + sideLength))

    addLine(to: CGPoint(x: sideLength, y: (yDrop * 2) + sideLength))
    addLine(to: CGPoint(x: 0, y: yDrop + sideLength))

    addLine(to: CGPoint(x: 0, y: yDrop ))
    //addLine(to: CGPoint(x: sideLength, y: 0))
    close()
}

}

然后创建一个Hexagon UIImageView：

class HexagonImageView: UIImageView {
let hexagonPath = HexagonPath()

var sideLength: CGFloat = 100 {
    didSet {
        hexagonPath.sideLength = sideLength
        initilize()
    }
}

init() {
    super.init(frame: CGRect())
    initilize()
}

override init(frame: CGRect) {
    super.init(frame: frame)
    initilize()
}

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

private func initilize() {
    self.frame.size.width = sideLength * 2
    self.frame.size.height = sideLength * 2

    contentMode = .scaleAspectFill
    mask(withPath: hexagonPath)
}

// MAKE THE TAP-HIT POINT JUST THE INNER PATH
override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
    return hexagonPath.contains(point)
}

}

使用此扩展：

extension UIView {
func mask(withRect rect: CGRect, inverse: Bool = false) {
    let path = UIBezierPath(rect: rect)
    let maskLayer = CAShapeLayer()

    if inverse {
        path.append(UIBezierPath(rect: self.bounds))
        maskLayer.fillRule = kCAFillRuleEvenOdd
    }

    maskLayer.path = path.cgPath

    self.layer.mask = maskLayer
}

func mask(withPath path: UIBezierPath, inverse: Bool = false) {
    let path = path
    let maskLayer = CAShapeLayer()

    if inverse {
        path.append(UIBezierPath(rect: self.bounds))
        maskLayer.fillRule = kCAFillRuleEvenOdd
    }

    maskLayer.path = path.cgPath

    self.layer.mask = maskLayer
}

}

最后，您可以在ViewController ViewDidLoad中使用它：

override func viewDidLoad() {
    super.viewDidLoad()

   let hexImageView = HexagonImageView()
    hexImageView.image = UIImage(named: "hotcube")
    hexImageView.sideLength = 100

    let tap = UITapGestureRecognizer(target: self, action: #selector(imageTapped))
    tap.numberOfTapsRequired = 1
    hexImageView.isUserInteractionEnabled = true
    hexImageView.addGestureRecognizer(tap)

    view.addSubview(hexImageView)
}

func imageTapped() {
    print("tapped")
}