在 Swift 中的 UIView 上绘制网格 [英] Drawing a grid on a UIView in Swift

问题描述

我对 Swift 很陌生.我正在尝试在 Swift 中的 UIView 上绘制网格(如图形页面).代码正在运行，但我没有看到任何行.我不明白我做错了什么.

I am very new to Swift. Am trying to draw a grid (like a graph page) on a UIView in Swift. The code is running but I don't see any lines. I don't see what I did wrong.

在 Storyboard 中，我在 ViewController 上添加了一个视图.

In the Storyboard I added a View onto the ViewController.

在代码中，我创建了一个 GridView.swift 并将其添加到上面的视图中.这是 GridView 类的代码.正在调用函数 draw 并且代码运行没有任何错误.它只是在做我认为它会做的事情.

In code I created a GridView.swift and added it to the View above. Here is the code for GridView class. The function draw is being called and the code running without any errors. Its just doing what I thought it would do.

它甚至没有画一条线(我删除了 for 循环并尝试画一条线).这看起来很基本，它应该可以工作.

Its not even drawing one line (I remove the for loop and just try to draw one line). This seems so basic that it should work.

import Foundation
import UIKit

class GridView: UIView 
{
    fileprivate var gridWidthMultiple: CGFloat
    {
        return 10
    }
    fileprivate var gridHeightMultiple : CGFloat
    {
        return 20
    }

    fileprivate var gridWidth: CGFloat
    {   
        return bounds.width/CGFloat(gridWidthMultiple)
    }

    fileprivate var gridHeight: CGFloat
    {
        return bounds.height/CGFloat(gridHeightMultiple)
    }

    fileprivate var gridCenter: CGPoint {
        return CGPoint(x: bounds.midX, y: bounds.midY)
    }

    fileprivate func drawGrid()
    {
        let path = UIBezierPath()
        path.lineWidth = 5.0

        for index in 1...Int(gridWidthMultiple) - 1
        {
            let start = CGPoint(x: CGFloat(index) * gridWidth, y: 0)
            let end = CGPoint(x: CGFloat(index) * gridWidth, y:bounds.height)
            path.move(to: start)
            path.addLine(to: end)
        }
    }

    override func draw(_ rect: CGRect)
    {
        drawGrid()
    }
}

推荐答案

只需复制并粘贴以下代码即可.我没有检查你绘制正确网格的逻辑，我刚刚解决了不绘制问题.如果它绘制了错误的网格，那么我现在会重新检查您的网格逻辑，它只是帮助您使用 UIBezierPath

Just Copy and paste the below code and you will be good to go. I haven't check your logic of drawing correct grid i have just solved the not drawing issue. If it draw wrong grid then i will re-check your grid logic for now it just help you to draw something using UIBezierPath

class GridView: UIView
{
    private var path = UIBezierPath()
    fileprivate var gridWidthMultiple: CGFloat
    {
        return 10
    }
    fileprivate var gridHeightMultiple : CGFloat
    {
        return 20
    }

    fileprivate var gridWidth: CGFloat
    {
        return bounds.width/CGFloat(gridWidthMultiple)
    }

    fileprivate var gridHeight: CGFloat
    {
        return bounds.height/CGFloat(gridHeightMultiple)
    }

    fileprivate var gridCenter: CGPoint {
        return CGPoint(x: bounds.midX, y: bounds.midY)
    }

    fileprivate func drawGrid()
    {
        path = UIBezierPath()
        path.lineWidth = 5.0

        for index in 1...Int(gridWidthMultiple) - 1
        {
            let start = CGPoint(x: CGFloat(index) * gridWidth, y: 0)
            let end = CGPoint(x: CGFloat(index) * gridWidth, y:bounds.height)
            path.move(to: start)
            path.addLine(to: end)
        }

        for index in 1...Int(gridHeightMultiple) - 1 {
            let start = CGPoint(x: 0, y: CGFloat(index) * gridHeight)
            let end = CGPoint(x: bounds.width, y: CGFloat(index) * gridHeight)
            path.move(to: start)
            path.addLine(to: end)
        }

        //Close the path.
        path.close()

    }

    override func draw(_ rect: CGRect)
    {
        drawGrid()

        // Specify a border (stroke) color.
        UIColor.purple.setStroke()
        path.stroke()
    }
}

这篇关于在 Swift 中的 UIView 上绘制网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！