UIBezierPath 畫不規則帶圓角圖形

 

實現效果如下

 

 

前言

   公司由於想實現如上的需求，想了很久，於是乎自己實現了一個這樣的制作過程。

 

實現方案如下：

 

import UIKit

class KBDraw: UIView {

   
    // Only override draw() if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    override func draw(_ rect: CGRect) {
        myDraw()
    }
    
    func myDraw() {
        /*
         * 這里發現其實壓根不需要畫中間的線。直接畫圓覺弧度 就可以實現了（）
         */
        let radius :CGFloat = 10
        UIColor(r: 255, g: 0, b: 0, a: 100).setFill()
        //        UIColor.orange.setFill()
        UIColor.yellow.setStroke()
        let offset :CGFloat = 40
        let bezierPath = UIBezierPath()
        bezierPath.move(to: CGPoint(x: 10 + offset, y: 10))
        bezierPath.addLine(to: CGPoint(x: 100 + offset, y: 10))

        bezierPath.addArc(withCenter: CGPoint(x: 100 + offset, y: 10 + radius), radius: radius, startAngle: CGFloat(-Double.pi/2.0), endAngle: 0, clockwise: true)
        bezierPath.addArc(withCenter: CGPoint(x: 100 + offset, y: 100), radius: radius, startAngle: 0, endAngle: CGFloat(Double.pi/2.0), clockwise: true)
        bezierPath.addArc(withCenter:CGPoint(x: 50 + offset , y: 100 + radius + radius), radius: radius, startAngle: CGFloat(-Double.pi/2.0), endAngle: CGFloat(-Double.pi), clockwise: false)
//        bezierPath.addLine(to: CGPoint(x: 50 - radius + offset , y: 140 + radius + radius))
        bezierPath.addArc(withCenter:CGPoint(x: 50 - radius - radius + offset , y: 140 + radius + radius), radius: radius, startAngle:0, endAngle: CGFloat(Double.pi/2), clockwise: true)
//        bezierPath.addLine(to: CGPoint(x: 10 + offset, y: 140 + radius + radius  + radius))
        bezierPath.addArc(withCenter: CGPoint(x: 10 + offset - radius, y: 140 + radius + radius  ), radius: radius, startAngle: CGFloat(Double.pi/2.0), endAngle: CGFloat(Double.pi), clockwise: true)
        
//        bezierPath.addLine(to: CGPoint(x: 10 + offset - radius - radius, y: 10 + radius))
        bezierPath.addArc(withCenter: CGPoint(x: 10 + offset - radius , y: 10 + radius), radius: radius, startAngle: CGFloat(Double.pi), endAngle: CGFloat(Double.pi) * 3 / 2, clockwise: true)
        bezierPath.addLine(to:  CGPoint(x: 10 + offset, y: 10))
        
        bezierPath.lineWidth = 2.0
        bezierPath.setLineDash([3,2], count: 2, phase: 0)
        bezierPath.stroke()
        bezierPath.fill()
    }

}

 

 

其實 在本方案中，我發現不必設置中間的直線就可以實現這個效果，也是意外！