Search code examples
swiftuibezierpath

Slant one edge of rectangle UIBezierPath

I'm trying to slant one edge of a UIBezierPath in Swift. I believe you do this by using move on one of the edges. Similar to the below - 

let offset: CGFloat = 60.0;

let path = UIBezierPath()

let width = self.bounds.width - offset

let upperLeftPoint = CGPoint(x: self.bounds.origin.x + width + offset, y: self.bounds.origin.y)
let upperRightPoint = CGPoint(x: self.bounds.origin.x, y: self.bounds.origin.y)

let lowerRightPoint = CGPoint(x: self.bounds.origin.x, y: self.bounds.size.height)
let lowerLeftPoint = CGPoint(x: width - offset, y: self.bounds.size.height)

path.move(to: upperLeftPoint)
path.addLine(to: upperRightPoint)
path.addLine(to: lowerRightPoint)
path.addLine(to: lowerLeftPoint)
path.addLine(to: upperLeftPoint)

// Close the path. This will create the last line automatically.
path.close()
UIColor.red.setFill()
path.fill()

let shapeLayer = CAShapeLayer()
shapeLayer.path = path.cgPath
self.layer.mask = shapeLayer;

However this isn't quite what I'm trying to achieve. Below is what I'm attempting to achieve. desired image

Solution

  • I achieved this shape by doing the following - 

    class Header: UIView {
    var path: UIBezierPath!

    override init(frame: CGRect) {
        super.init(frame: frame)

        self.backgroundColor = UIColor.red
    }

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

    func createHeader() {
        // Drawing code
        // Get Height and Width
        let layerHeight = layer.frame.height
        let layerWidth = layer.frame.width
        // Create Path
        let bezierPath = UIBezierPath()
        //  Points
        let pointA = CGPoint(x: 0, y: 0)
        let pointB = CGPoint(x: layerWidth, y: 0)
        let pointC = CGPoint(x: layerWidth, y: layerHeight*2/3)
        let pointD = CGPoint(x: 0, y: layerHeight)
        // Draw the path
        bezierPath.move(to: pointA)
        bezierPath.addLine(to: pointB)
        bezierPath.addLine(to: pointC)
        bezierPath.addLine(to: pointD)
        bezierPath.close()
        // Mask to Path
        let shapeLayer = CAShapeLayer()
        shapeLayer.path = bezierPath.cgPath
        layer.mask = shapeLayer
    }

    override func draw(_ rect: CGRect) {
        //    self.createRectangle()
        self.createHeader()
    }
}