Question

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

在Storyboard中，我在ViewController上添加了一个View。

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

它甚至没有绘制一条线（我删除了for循环并尝试绘制一条线）。这似乎是基本的，它应该工作。

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

Answer 1

只需复制并粘贴以下代码，您就可以了。我没有检查你绘制正确网格的逻辑我刚刚解决了非绘图问题。如果它绘制错误的网格，那么我将重新检查您的网格逻辑，现在它只是帮助您使用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)
        }
        //Close the path.
        path.close()

    }

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

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

Answer 2

如果你想在视图初始化时制作绘制逻辑，但你实际上想要稍后绘制线条，即某些特殊事件发生时。 Bellow类有两种方法drawGridWithStoreColor和removeGrid这可以帮助您随时绘制网格，并在需要时删除网格。

class GridView: UIView
{
    private var path = UIBezierPath()
    var gridLayer: CAShapeLayer?

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


    }

    //Call this method with your stroke color when you want to draw this grid
    func drawGridWithColor(borderColor: UIColor) {
        //Close the path.
        path.close()
        if gridLayer == nil {
            gridLayer = CAShapeLayer()
            gridLayer?.lineWidth = 5.0;
            gridLayer?.path = path.cgPath
            gridLayer?.strokeColor = borderColor.cgColor

            self.layer.addSublayer(gridLayer!)
            //Above line will add this grid at the very top of this view.



            // if you want to add this grid below some layer/object you can use method
            //self.layer.insertSublayer(gridLayer, at: 0)
            //Give the index number to this method so that it can place this grid at the index

        }else {
            gridLayer?.strokeColor = borderColor.cgColor
        }
    }

    func removeGrid() {
        guard let gLayer = gridLayer else {return}
        gLayer.removeFromSuperlayer()
    }

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

Answer 3

这个类似于Instagram 的创建模式 文本对齐网格。在 viewDidLoad()...

中添加以下两个函数

func addVerticalGrid(){
    
    let Path = UIBezierPath()
    Path.move(to: CGPoint(x: view.bounds.midX, y: 0))
    Path.addLine(to: CGPoint(x: view.bounds.midX, y: view.frame.height))
    Path.close()
    
    let shapeLayer1 = CAShapeLayer()
    shapeLayer1.path = Path.cgPath
    shapeLayer1.strokeColor = UIColor.red.cgColor
    view.layer.addSublayer(shapeLayer1)
}

func addHorizontalGrid(){
    
    let Path = UIBezierPath()
    Path.move(to: CGPoint(x: 0, y: view.bounds.midY))
    Path.addLine(to: CGPoint(x: view.frame.width, y: view.bounds.midY))
    Path.close()
    
    let shapeLayer2 = CAShapeLayer()
    shapeLayer2.path = Path.cgPath
    shapeLayer2.strokeColor = UIColor.red.cgColor
    view.layer.addSublayer(shapeLayer2)
}

在Swift中的UIView上绘制网格

3 个答案: