Shape in iOS app

Question

I am making zigzag shape on UIView when I am increasing view size its not coming properly.

I am using this code

    func zigZagShape() {
        let width = self.frame.size.width
        let height = self.frame.size.height
        let givenFrame = self.frame

        let zigZagWidth = CGFloat(6)
        let zigZagHeight = CGFloat(4)

        var yInitial = height-zigZagHeight
        let zigZagPath = UIBezierPath(rect: givenFrame)
        zigZagPath.move(to: CGPoint(x:0, y:0))
        zigZagPath.addLine(to: CGPoint(x:0, y:yInitial))

        var slope = -1
        var x = CGFloat(0)
        var i = 0
        while x < width {
            x = zigZagWidth * CGFloat(i)
            let p = zigZagHeight * CGFloat(slope)
            let y = yInitial + p
            let point = CGPoint(x: x, y: y)
            zigZagPath.addLine(to: point)
            slope = slope*(-1)
            i += 1
        }

        zigZagPath.addLine(to: CGPoint(x:width,y: 0))
        yInitial = 0 + zigZagHeight
        x = CGFloat(width)
        i = 0
        while x > 0 {
            x = width - (zigZagWidth * CGFloat(i))
            let p = zigZagHeight * CGFloat(slope)
            let y = yInitial + p
            let point = CGPoint(x: x, y: y)
            zigZagPath.addLine(to: point)
            slope = slope*(-1)
            i += 1
        }

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

have you add a small view and added the above code on it , or you are using viewcontroller's view? — Myaaoonn, Nov 23 '17 at 05:21

Dhiru · Accepted Answer · 2017-11-23T08:27:50.467

I have corrected you code, when you are drawing using UIBezierPath don't initialise with frame . also

@IBDesignable
 class ZigZiagView: UIView {

   override func draw(_ rect: CGRect) {
        super.draw(rect)

         zigZagShape()
    }

    func zigZagShape() {

        let width = self.frame.size.width
        let height = self.frame.size.height
        //let givenFrame = self.frame

        let zigZagWidth = CGFloat(6)
        let zigZagHeight = CGFloat(4)

        var yInitial = height-zigZagHeight
        let zigZagPath = UIBezierPath()
        zigZagPath.move(to: CGPoint(x:0, y:0))
        zigZagPath.addLine(to: CGPoint(x:0, y:yInitial))

        var slope = -1
        var x = CGFloat(0)
        var i = 0
        while x < width {
            x = zigZagWidth * CGFloat(i)
            let p = zigZagHeight * CGFloat(slope)
            let y = yInitial + p
            let point = CGPoint(x: x, y: y)
            zigZagPath.addLine(to: point)
            slope = slope*(-1)
            i += 1
        }

        zigZagPath.addLine(to: CGPoint(x:width,y: 0))

       // draw the line from top right to Bottom 
        zigZagPath.addLine(to: CGPoint(x:width,y:height))

        yInitial = 0 + zigZagHeight
        x = CGFloat(width)
        i = 0
        while x > 0 {
            x = width - (zigZagWidth * CGFloat(i))
            let p = zigZagHeight * CGFloat(slope)
            let y = yInitial + p
            let point = CGPoint(x: x, y: y)
            zigZagPath.addLine(to: point)
            slope = slope*(-1)
            i += 1
        }

     // Now Close the path 
        zigZagPath.close()

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

}

Try with this , and let me know if this worked or not ?

Shape in iOS app

1 Answers1