Isometric grid overlay

Using Swift
1

The following is supposed to create an isometric lattice pattern across a UIView, but all it does is turn the page black:

class IsometricGrid: UIView {

    let gridSpacing: CGFloat = 20

    override func draw(_ rect: CGRect) {

        let context = UIGraphicsGetCurrentContext()

        context?.setStrokeColor(UIColor.black.cgColor)
        context?.setAlpha(0.2)
        context?.setLineWidth(100)

        for x in stride(from: 0, through: self.frame.width, by: gridSpacing) {
            for y in stride(from: 0, through: self.frame.height, by: gridSpacing) {
                // Draw the diagonal lines for the isometric grid
                context?.move(to: CGPoint(x: x, y: y))
                context?.addLine(to: CGPoint(x: x + gridSpacing, y: y + gridSpacing))
                context?.strokePath()

                context?.move(to: CGPoint(x: x + gridSpacing, y: y))
                context?.addLine(to: CGPoint(x: x, y: y + gridSpacing))
                context?.strokePath()
            }
        }
    }

}

        let isometricGridView = IsometricGrid()
        isometricGridView.frame = CGRect(x: 0, y: 0, width: view.bounds.width, height: view.bounds.height)
        view.addSubview(isometricGridView)

I am using an older version of Swift, but this is CoreGraphics and nothing new. Perhaps it is the iPhone XR emulator ?

2

You space your lines every 20 points, but your lines are 100 points wide.

3

It's just dummy data.

I tried a number of different combinations to see what was going on, none of which worked.

4

Your view is black, and you're drawing black lines on black background.
Try changing the line color:

context?.setStrokeColor(UIColor.red.cgColor)

Or making the view transparent:

isometricGridView.backgroundColor = .clear
2 Likes
5

You are correct.

My storyboard was set to white so I just assumed that this would not be an issue. I even tried to change the alpha (to no avail).

Making the mesh background transparent makes a lot of sense.

Thanks !