制作一个形状为 CAShapeLayer 的 UIButton

Question

所以我正在制作一种基于六边形的简单游戏。这是它的样子：

我已经成功地将六边形完全按照我想要的方式绘制为CAShapeLayers，但我想让它们可点击。简而言之，我想以某种方式将它们投射到UIButtons 中，这样我就可以通过 touchUpInside 跟踪选择了哪一个。我能想到的另一种方法是跟踪触摸并检查它们是否在带有标签的形状中，但这似乎很复杂。以下是我的代码：

        let screenSize: CGRect = UIScreen.mainScreen().bounds
        let screenWidth = screenSize.width
        let screenHeight = screenSize.height

        let radius : CGFloat = screenWidth/6

        var c = 0

        var counter = 0

        for j in 1...6 {
            for i in 1...3 {

                for x in 1...2 {

                    var center = CGPoint(x: CGFloat((i-1)*2)*radius+CGFloat(i-1)*radius, y: CGFloat((j-1)*2)*radius)

                    if (x==2) {
                        center.x = center.x+1.5*radius
                        center.y = center.y+radius
                    }



                    let shape = CAShapeLayer()
                    view.layer.addSublayer(shape)
                    shape.opacity = 0.5
                    shape.lineWidth = 2
                    shape.lineJoin = kCALineJoinMiter
                    shape.strokeColor = UIColor(hue: 0.786, saturation: 0.79, brightness: 0.53, alpha: 1.0).CGColor
                    shape.fillColor = UIColor(hue: 0.786, saturation: 0.15, brightness: 0.89, alpha: 1.0).CGColor


                    let path = UIBezierPath()
                    path.moveToPoint(CGPointMake(center.x-radius, center.y))
                    path.addLineToPoint(CGPointMake(center.x-radius/2, center.y-radius))
                    path.addLineToPoint(CGPointMake(center.x+radius/2, center.y-radius))
                    path.addLineToPoint(CGPointMake(center.x+radius, center.y))
                    path.addLineToPoint(CGPointMake(center.x+radius, center.y))
                    path.addLineToPoint(CGPointMake(center.x+radius/2, center.y+radius))
                    path.addLineToPoint(CGPointMake(center.x-radius/2, center.y+radius))

                    path.closePath()
                    shape.path = path.CGPath



                }


            }

        }

Answer 1

我能想到的另一种方法是跟踪触摸并检查它们是否在带有标签的形状中，但这似乎有点复杂

好的，但问题是您选择使用图层来执行此操作，而图层根本不会检测触摸，因此很难看出您还有什么其他选择。您不能将图层“投射”到按钮中；如果你想要按钮或视图来检测自己的点击，你应该使用按钮或视图，不是层。

如果您使用自定义 UIView，例如，它可以使用您的形状图层作为其图层并实施命中测试以确定点击是否落在形状图层的六边形路径中。下面是一个帮助您入门的示例：

class HexButton: UIView {

    var path: UIBezierPath!

    override class func layerClass() -> AnyClass {
        return CAShapeLayer.self
    }

    override init(frame: CGRect) {
        super.init(frame:frame)
        self.finishInitialization()
    }

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

    func finishInitialization() {
        let shape = self.layer as! CAShapeLayer
        shape.opacity = 0.5
        shape.lineWidth = 2
        shape.lineJoin = kCALineJoinMiter
        shape.strokeColor = UIColor(hue: 0.786, saturation: 0.79, brightness: 0.53, alpha: 1.0).CGColor
        shape.fillColor = UIColor(hue: 0.786, saturation: 0.15, brightness: 0.89, alpha: 1.0).CGColor

        let center = CGPoint(x:self.bounds.midX, y: self.bounds.midY)
        let radius = self.bounds.width/2.0

        let path = UIBezierPath()
        path.moveToPoint(CGPointMake(center.x-radius, center.y))
        path.addLineToPoint(CGPointMake(center.x-radius/2, center.y-radius))
        path.addLineToPoint(CGPointMake(center.x+radius/2, center.y-radius))
        path.addLineToPoint(CGPointMake(center.x+radius, center.y))
        path.addLineToPoint(CGPointMake(center.x+radius, center.y))
        path.addLineToPoint(CGPointMake(center.x+radius/2, center.y+radius))
        path.addLineToPoint(CGPointMake(center.x-radius/2, center.y+radius))

        path.closePath()
        shape.path = path.CGPath

        self.path = path

    }

    override func hitTest(point: CGPoint, withEvent event: UIEvent?) -> UIView? {
        return self.path.containsPoint(point) ? self : nil
    }

}

如果您将点击手势识别器附加到该视图，您将看到它仅在点击位于六边形内时才会触发。