How to create Right Angle View in Swift?

问题

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

回答1:

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.

回答2:

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
    }
}

回答3:

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

来源：https://stackoverflow.com/questions/53257685/how-to-create-right-angle-view-in-swift

标签

swift

uiview