How to create Right Angle View in Swift?

Question

I am able to create triangle view in swift using below code-

class TriangleView: UIView {

    override func draw(_ rect: CGRect) {

        // Get Height and Width
        let layerHeight = layer.frame.height
        let layerWidth = layer.frame.width

        // Create Path
        let bezierPath = UIBezierPath()

        // Draw Points
        bezierPath.move(to: CGPoint(x: 0, y: layerHeight))
        bezierPath.addLine(to: CGPoint(x: layerWidth, y: layerHeight))
        bezierPath.addLine(to: CGPoint(x: layerWidth / 2, y: 0))
        bezierPath.addLine(to: CGPoint(x: 0, y: layerHeight))
        bezierPath.close()

        // Apply Color
        UIColor.red.setFill()
        bezierPath.fill()

        // Mask to Path
        let shapeLayer = CAShapeLayer()
        shapeLayer.path = bezierPath.cgPath
        layer.mask = shapeLayer
    }

}

  override func viewDidLoad() {
        super.viewDidLoad()

        let triangle = TriangleView(frame: CGRect(x: 0, y: 0, width: 55 , height: 60))
        triangle.backgroundColor = .white
        triangle.transform = CGAffineTransform(rotationAngle: .pi * 4.49)
        imageView.addSubview(triangle)

}

Now problem is that I want to change it to the right angle triangle using transform properties. How to achieve this?

Expected Result

Current Result

It [this](https://stackoverflow.com/questions/29618760/create-a-rectangle-with-just-two-rounded-corners-in-swift) related? — Ahmad F, Nov 12 '18 at 08:01

Cosmos Man · Answer 1 · 2018-11-12T08:17:12.883

I hope you want this part.

Here is the code.

override func draw(_ rect: CGRect) {

    let path = UIBezierPath.init()

    // top left
    path.move(to: .zero)

    // top right
    path.addLine(to: CGPoint(x: bounds.size.width,
                             y: 0))

    // bottom left offset
    path.addLine(to: CGPoint(x: bounds.size.width * 0.1,
                             y: bounds.size.height))

    // bottom left
    path.addLine(to: CGPoint(x: 0,
                             y: bounds.size.height))

    // top left
    path.close()

    // change fill color here.
    UIColor.black.setFill()
    path.fill()
}

Result

How I drew

Modification

If you change the code UIColor.black.setFill() to

let fillColor = UIColor(red: 0xF9/0xff, green: 0x0D/0xff, blue: 0x5A/0xff, alpha: 1)
    fillColor.setFill()

you get this result.

Have fun coding.

JonJ · Answer 2 · 2018-11-12T09:42:43.717

You're currently drawing 'a'. You want to draw 'b'.

extension UIBezierPath {

    convenience init(rightAngledTriangleInRect: CGRect, offset withOffset: CGFloat) {
        self.init()
        move(to: CGPoint(x: rect.minX, y: rect.minY))
        addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
        addLine(to: CGPoint(x: rect.minX + offset, y: rect.maxY))
        addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
        addLine(to: CGPoint(x: rect.minX, y: rect.minY))
        close()
    }
}

Then use by:

let path = UIBezierPath.init(rightAngledTriangleInRect: rect, withOffset: 20.0)

Note that there's no need to add self. in the convenience inits for the bezier path instructions.

If you're doing a lot of drawing, I'd recommend adding a number of these inits to make life easier.

To use in your current TriangleView:

class TriangleView: UIView {

    override func draw(_ rect: CGRect) {

        let path = UIBezierPath.init(rightAngledTriangleInRect: rect, withOffset: 20.0)
        let shape = CAShapeLayer()
        shape.path = path.cgPath

        // Set the mask
        layer.mask = shape
    }
}

Can you please describe with example, How to use this code snippet? — iDeveloper, Nov 12 '18 at 09:37

score 0 · Answer 3 · answered Nov 12 '18 at 08:18

0

There are some easy way too for achivieng this but for using transform here is the sample code.use this transform instead of yours.it's sample code for having right angle triangle from your drawing:

triangle.transform = CGAffineTransform.identity.rotated(by: CGFloat.pi).translatedBy(x: (triangle.bounds.width / 2), y: 0.0)

you should notice that CGAffineTransform rotate the view from it's origins

answered Nov 12 '18 at 08:18

andesta.erfan

972
2
12
30

Working for the simple view, but not in tableview cell – iDeveloper Nov 12 '18 at 08:50
@iDeveloper there is no problem in tableViewCell.i tested.be sure to add `tableView.addSubView(triangle)` – andesta.erfan Nov 12 '18 at 09:19

How to create Right Angle View in Swift?

3 Answers3

Linked