制作具有形状CAShapeLayer的UIButton

时间:2016-07-10 16:35:58

标签: ios swift uibutton cashapelayer

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

enter image description here

我设法以CAShapeLayer的方式完全按照我想要的方式绘制六边形,但我想让它们可点击。总之,我想以某种方式将它们转换为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



                }


            }

        }

1 个答案:

答案 0 :(得分:2)

  

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

好的,但问题是您选择使用图层执行此操作,并且图层根本检测不到触摸,因此很难看到其他选项对您开放。你不能将一个图层“转换”成一个按钮;如果你想要按钮或自己检测水龙头的视图,你应该有使用按钮或视图,不是图层。

例如,如果您使用自定义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
    }

}

如果您将点击手势识别器附加到该视图,您将看到只有在水龙头位于六边形内部时它才会触发。