Making a triangle in a UIView with a CGRect Frame

Question

HI I am making a game and need a spike at the bottom which I have decided to do via a UIView and collisions. I am coding in swift.

I currently have a square:

        //Object Setup
        let square = UIView(frame: CGRect(x:100, y:100, width: 100, height: 100))
        square.backgroundColor = UIColor.purpleColor()
        view.addSubview(square)

And I would like a triangle, I do have an image which I can use for a triangle but the image is square so surely the collision would be when it touches the image borders not the actual trianlge borders please advice on how to do with image or how I got square.

Thanks

Alex

Have you considered using SpriteKit for your game? Really "shape-matching" physics and collisions are very easing using SpriteKit, however UIKit will reach its limits really fast when you create games — CodingMeSwiftly, Oct 26 '14 at 22:41

Michael · Answer 1 · 2016-11-08T17:03:45.790

36

Steps:

Create a new file that subclasses UIView called TriangleView
Paste this into the TriangleView class
Add a TriangleView through XIB or programmatically

import UIKit

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.green.setFill()
        bezierPath.fill()

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

Result:

Triangle via swift code

edited Nov 08 '16 at 17:03

answered Jul 20 '15 at 18:38

Michael

9,639
3
64
69

The Swift 2 compiler will probably tell you that most of your `var`s should be `let`s because you don't mutate them after you create them. This includes `beizerPath`, because you mutate the Objective-C object, but not the pointer. – Zev Eisenberg Jul 20 '15 at 19:22
how do you pass in a custom parameter or color using this method? – Andrew Aug 13 '15 at 14:18
@AndrewAnthonyGerst check this out - http://stackoverflow.com/a/24263296/2415921 Simply make a `Swift Extension` to a `UIView`. You can make the extension in 1 class and access it from any other class as well! – Michael Aug 13 '15 at 14:36
@MikeMilla thanks for the prompt reply mike! i did figure it out though. i created a new constructor so i can pass in custom parameters. ```let triangleView = TriangleView(frame: CGRectMake(0.0, 0.0, 50.0, 50.0), dir: "down", color: UIColor.orangeColor())``` do you know if there is a way to add a shadow around the triangle? – Andrew Aug 13 '15 at 14:54
Worked like a charm. – kemicofa ghost Oct 12 '16 at 08:28
To make this render in your storyboard just add `@IBDesignable` above the class definition. – rob5408 Jun 27 '17 at 22:14

score 5 · Accepted Answer · answered Oct 26 '14 at 22:58

There is tutorial here:

http://jamesonquave.com/blog/drawing-custom-views-with-swift-andrew-vanwagoner/

with code like this:

func drawPlayPathTo(context: CGContextRef, boundedBy rect: CGRect) {
  CGContextSetFillColorWithColor(context, UIColor.blackColor().CGColor)
  CGContextMoveToPoint(context, rect.width / 4, rect.height / 4)
  CGContextAddLineToPoint(context, rect.width * 3 / 4, rect.height / 2)
  CGContextAddLineToPoint(context, rect.width / 4, rect.height * 3 / 4)
  CGContextAddLineToPoint(context, rect.width / 4, rect.height / 4)
  CGContextFillPath(context)
}

Making a triangle in a UIView with a CGRect Frame

2 Answers2

Steps:

Result: