时间戳

首页 > 解决方案 > 使用新的可点击区域和框架创建自定义形状（非矩形）按钮和按钮集

swift - 使用新的可点击区域和框架创建自定义形状（非矩形）按钮和按钮集

问题描述

我正在创建一个由 6 个三角形按钮组成的圆形按钮集，如下所示。

圆形按钮组

每个三角形是一个不同的按钮。为了创建那个圆形，我在每个顶部创建了 6 个不同的三角形按钮层，并通过连续添加 +60 度来旋转每个层（详细说明如下）。由于旋转发生在 viewdidload 中，所以如果不启动模拟器，我就无法获得这个圆形。

在没有启动模拟器的情况下，三角形按钮如下所示。我知道它看起来像一个三角形按钮，但它下面还有 5 个相同的按钮（总共 6 个按钮）。为了给它们圆形形状，我将每个旋转了 60 度。（也带有锚点）

所以第一张图片旋转了 0 度，第二张是 60 度，第三张是 120 度等等。这就是我用三角形按钮获得圆形形状的方式。

在此处输入图像描述

我还为每个三角形设置了三角形可点击区域（通过使用 BezierPath），因此只有三角形图像是可点击的。但是按钮的框架仍然是矩形，如下所示。

在此处输入图像描述

我的问题是，当我得到圆形时，最后一个三角形的框架与第一个按钮重叠。所以即使可点击区域是三角形的，由于框架（它是矩形）它会阻止它附近按钮的可点击区域。有什么可能的方法可以将按钮的框架裁剪为我想要的自定义形状？或者它总是必须是矩形的？如何解决由于圆形而导致框架重叠的问题？

我对任何类型的解决方案持开放态度，即使是以另一种方式创建圆形按钮集也是如此。

我的代码块如下。

代码：

带有新锚点的旋转函数：

 func rotateButton(button : UIButton, angle : Double) {
    
    button.setAnchorPoint(CGPoint(x: 1, y: 1))// setting new anchor
    button.transform = CGAffineTransform(rotationAngle: CGFloat(angle * Double.pi/180))
}

将每个三角形按钮的旋转角度增加 60 度：

 for buttons in buttonArray {
    
        rotateButton(button: buttons, angle: degree)
    degree = degree + 60
        }

设置按钮的三角形可点击区域类（然后将按钮的类设置为这个新类）：

class triangleShapeButton: UIButton {
private let triangle = UIBezierPath()

override func draw(_ rect: CGRect) {
        super.draw(rect)
        triangle.move(to: CGPoint(x: rect.width, y: rect.height))
        triangle.addLine(to: CGPoint(x:rect.width/2, y: 0))
        triangle.addLine(to: CGPoint(x: 0, y:rect.height))
        triangle.close()

    }

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        // This is for allow touches only in shape area.
        if triangle.contains(touches.first?.location(in: self) ?? .zero) {
            super.touchesBegan(touches, with: event)
        }
    }

标签： swiftxcodeuiviewuibuttonuibezierpath

解决方案

推荐阅读