Isometric grid overlay

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 ?

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

It's just dummy data.

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

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

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 !