Question

花了一整天的时间试图弄清楚如何做到这一点后，我终于找到了一种非矩形按钮的方法。

底部的所有三个按钮都在一个按钮上。然后hitTest计算出点击所在的UIBezierPath然后调用一个函数。

import UIKit

class ViewController: UIViewController {

    let path = UIBezierPath()
    let path2 = UIBezierPath()
    let path3 = UIBezierPath()
    let path4 = UIBezierPath()

    @IBAction func clicked(_ sender: Any) {
        print("Clicked")
    }

    @IBOutlet weak var button: UIButton!

    override func viewDidLoad() {
        super.viewDidLoad()
        drawShape()
        let gesture = UITapGestureRecognizer(target: self, action:  #selector (self.checkAction(sender:)))
        self.button.addGestureRecognizer(gesture)
    }

    func drawShape(){
        let buttonWidth = button.frame.width
        let buttonHeight = buttonWidth * 1.23
        path.move(to: CGPoint(x: 0, y: buttonHeight*0.85))
        path.addLine(to: CGPoint(x: 0, y: buttonHeight))
        path.addLine(to: CGPoint(x: buttonWidth, y: buttonHeight))
        path.addLine(to: CGPoint(x: buttonWidth, y: buttonHeight*0.68))
        path.close()
        path2.move(to: CGPoint(x: 0, y: buttonHeight*0.68))
        path2.addLine(to: CGPoint(x: 0, y: buttonHeight*0.85))
        path2.addLine(to: CGPoint(x: buttonWidth, y: buttonHeight*0.68))
        path2.addLine(to: CGPoint(x: buttonWidth, y: buttonHeight*0.35))
        path2.close()
        path3.move(to: CGPoint(x: 0, y: buttonHeight*0.50))
        path3.addLine(to: CGPoint(x: 0, y: buttonHeight*0.68))
        path3.addLine(to: CGPoint(x: buttonWidth, y: buttonHeight*0.35))
        path3.addLine(to: CGPoint(x: buttonWidth, y: buttonHeight*0.06))
        path3.close()
        path4.move(to: CGPoint(x: 0, y: buttonHeight*0.45))
        path4.addLine(to: CGPoint(x: 0, y: buttonHeight*0.50))
        path4.addLine(to: CGPoint(x: buttonWidth, y: buttonHeight*0.06))
        path4.addLine(to: CGPoint(x: buttonWidth, y: buttonHeight*0.01))
        path4.close()

    }

    func checkAction(sender : UITapGestureRecognizer) {
        let location = sender.location(in: button)
        print(location)
        hitTest(tapLocation: location)
    }

    public func hitTest(tapLocation:CGPoint){
        if path.contains(tapLocation){
            print("Button3")
        }
        if path2.contains(tapLocation){
            print("Button2")
        }
        if path3.contains(tapLocation){
            print("Button1")
        }
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

}

然后在链接到按钮的文件中：

import UIKit
@IBDesignable

class PushButtonView: UIButton {
    override func draw(_ rect: CGRect) {
        let buttonWidth = self.frame.width
        let buttonHeight = buttonWidth * 1.23

        let color1 = hexStringToUIColor(hex: "#e0dfd5")
        let color2 = hexStringToUIColor(hex: "#ef6461")
        let color3 = hexStringToUIColor(hex: "#e4b363")
        let color4 = hexStringToUIColor(hex: "#313638")

        let path = UIBezierPath()
        path.move(to: CGPoint(x: 0, y: buttonHeight*0.85))
        path.addLine(to: CGPoint(x: 0, y: buttonHeight))
        path.addLine(to: CGPoint(x: buttonWidth, y: buttonHeight))
        path.addLine(to: CGPoint(x: buttonWidth, y: buttonHeight*0.68))
        path.close()
        color4.setFill()
        path.fill()
        let path2 = UIBezierPath()
        path2.move(to: CGPoint(x: 0, y: buttonHeight*0.68))
        path2.addLine(to: CGPoint(x: 0, y: buttonHeight*0.85))
        path2.addLine(to: CGPoint(x: buttonWidth, y: buttonHeight*0.68))
        path2.addLine(to: CGPoint(x: buttonWidth, y: buttonHeight*0.35))
        path2.close()
        color3.setFill()
        path2.fill()
        let path3 = UIBezierPath()
        path3.move(to: CGPoint(x: 0, y: buttonHeight*0.50))
        path3.addLine(to: CGPoint(x: 0, y: buttonHeight*0.68))
        path3.addLine(to: CGPoint(x: buttonWidth, y: buttonHeight*0.35))
        path3.addLine(to: CGPoint(x: buttonWidth, y: buttonHeight*0.06))
        path3.close()
        color2.setFill()
        path3.fill()
        let path4 = UIBezierPath()
        path4.move(to: CGPoint(x: 0, y: buttonHeight*0.45))
        path4.addLine(to: CGPoint(x: 0, y: buttonHeight*0.50))
        path4.addLine(to: CGPoint(x: buttonWidth, y: buttonHeight*0.06))
        path4.addLine(to: CGPoint(x: buttonWidth, y: buttonHeight*0.01))
        path4.close()
        color1.setFill()
        path4.fill()
    }

    func hexStringToUIColor (hex:String) -> UIColor {
        var cString:String = hex.trimmingCharacters(in: .whitespacesAndNewlines).uppercased()

        if (cString.hasPrefix("#")) {
            cString.remove(at: cString.startIndex)
        }

        if ((cString.characters.count) != 6) {
            return UIColor.gray
        }

        var rgbValue:UInt32 = 0
        Scanner(string: cString).scanHexInt32(&rgbValue)

        return UIColor(
            red: CGFloat((rgbValue & 0xFF0000) >> 16) / 255.0,
            green: CGFloat((rgbValue & 0x00FF00) >> 8) / 255.0,
            blue: CGFloat(rgbValue & 0x0000FF) / 255.0,
            alpha: CGFloat(1.0)
        )
    }


}

一切正常！这可能不是最好的方式，但经过5个小时尝试不同的事情，这是最好的。但是我现在遇到的问题是不知道如何操纵我在外部文件中绘制的那些形状。我确信之前已经问过并回答了这个问题，但我确实不知道是不是要搜索。

例如，如果它是javascript我会假设在对象'按钮'中绘制的'路径'将被self.button.path（或类似的东西）访问，但是，我的理解是Swift3不能像那样工作。我对么？因此，如果我想用动画更改NOTES按钮/形状的backgroundColor，我将如何获得此效果：

UIView.animate(withDuration: 1, animations: {
    self.button.path.color = UIColor.red
}, completion: { finished in
    if(finished){
        //callFunction()
    }
})

这是可能的，或者一旦绘制了路径，它是不是一个可更改的对象，必须删除并重新绘制？

使用绘制的形状并更改其功能

0 个答案: