带坐标的平铺网格 [英] Tile Grid with Coordinates

问题描述

我正在尝试创建一个可以使用或高度指定的网格(即10宽20的盒子).我创建了一个脚本，该脚本创建了一个网格，但是我想以一种与创建方式不同的宽度和高度来创建它的方式.
当前，它会创建一个宽度与高度相等的网格，并且不显示坐标.

I'm trying to create a grid that can be specified with a with or height (i.e 10 boxes wide by 20 tall). I have created a script that creates a grid, but I would like to make it in a way that I can create it in different widths and heights than how I've done it.
It currently creates a grid that is equal in width as height and does not display the coordinates.

int numOfCells = 5;
int cellSize = 80;
Pen p = new Pen(Color.Black);

for (int y = 0; y < numOfCells; y++)
{
    graphics.DrawLine(p, 0, y * cellSize, numOfCells * cellSize, y * cellSize);
    for (int x = 0; x < numOfCells; x++)
    {
        graphics.DrawLine(p, x * cellSize, 0, x * cellSize, numOfCells * cellSize);
    }
}

结果如下:

我想要实现的是一个像这样的网格，它可以具有不同的宽度和高度，并在框中显示坐标:

What I'd like to achieve is a grid like this, that can have different width and height and also displays the coordinates within the boxes:

推荐答案

可自定义/可扩展类的示例，该类使用传递给其构造函数的参数来生成Grid.
该类还包含用于在设备上下文中绘制网格的方法(提供的 PaintEventArgs 参数的 Graphics 对象Paint 事件/控件的 OnPaint 方法).
作为基本实现，它允许指定在其单元格内绘制的文本的字体和颜色.
您可以添加更多属性，例如，定义网格线的颜色和粗细.

An example of a customizable / expandable Class that generates a Grid using the parameters passed to its Constructor.
The class also contains the method used to draw the grid in a device context (the Graphics object of the PaintEventArgs argument provided by the Paint event / OnPaint method of a Control).
As a base implementation, it allows to specify the Font and Color of the Text drawn inside its Cells.
You can add more properties, e.g., to define the grid lines Color and thickness.

►在图形示例中，您可以看到用于输入行数的三个TextBox控件( txtRows ， txtColumns 和 txtCellSize )和列以及像元大小.
当按下按钮( btnDrawGrid )时，如果正确解析了TextBoxes的内容，则会生成一个新的Grid对象，并使用该控件来呈现该网格(此处为一个名为的PictureBox控件)重新绘制 gridCanvas )，并调用其 Invalidate()方法，该方法将引发其 Paint 事件.

► In the graphic example, you can see three TextBox controls (txtRows, txtColumns and txtCellSize) used to input the number of Rows and Columns and the Cell size.
When the Button is pressed (btnDrawGrid), if the content of the TextBoxes is parsed correctly, a new Grid object is generated and the Control used to present the Grid (here, a PictureBox Control named gridCanvas) is re-painted, calling its Invalidate() method, which raises its Paint event.

在Paint事件中，将调用当前 DrawingGrid 类实例的公共 DrawGrid()方法，并传递该对象的 Graphics 对象.画布控件.

In the Paint event, the public DrawGrid() method of the current DrawingGrid class instance is called, passing the Graphics object of the canvas Control.

private DrawingGrid drawingGrid = null;

private void btnDrawGrid_Click(object sender, EventArgs e)
{
    if (!int.TryParse(txtRows.Text, out int gridRows)) return;
    if (!int.TryParse(txtColumns.Text, out int gridColumns)) return;
    if (!float.TryParse(txtCellSize.Text, out float cellSize)) return;

    drawingGrid = new DrawingGrid(gridRows, gridColumns, cellSize);
    gridCanvas.Invalidate();
}

private void gridCanvas_Paint(object sender, PaintEventArgs e)
{
    if (drawingGrid == null) return;
    drawingGrid.DrawGrid(e.Graphics);
}

DrawingGrid 类:

The DrawingGrid class:

此类使用嵌套的公共类 GridCell 定义网格的每个单元. List< GridCell> 包含创建 DrawingGrid 时生成的所有网格单元-使用传递给类Constructor的值-调用私有 BuildGrid()方法.

This class uses a nested public class, GridCell, to define each Cell of the Grid. A List<GridCell> contains all the Grid Cells generated when a DrawingGrid is created - using the values passed to the class Constructor - calling the private BuildGrid() method.

生成的单元格列表由 DrawingGrid 类的公共只读网格属性公开.
Font 属性默认为 SystemInformation.MenuFont ，而 TextColor 属性默认为 Color.DimGray .
这两个属性的值可以随时更改.

The list of generated cells is exposed by the public readonly Grid Property of the DrawingGrid class.
The Font property defaults to SystemInformation.MenuFont and the TextColor property to Color.DimGray.
The values of these two properties can be changed at any time.

►使用►使用 TextRenderer.DrawText().
设置其 TextFormatFlags 选项，文本为在单元格( TextFormatFlags.VerticalCenter | TextFormatFlags.Horizo​​ntalCenter )内垂直和水平居中，并删除了文本默认填充( TextFormatFlags.NoPadding ).

► The Text of each Cell (each Rectangle) is drawn using TextRenderer.DrawText().
Setting its TextFormatFlags option, the Text is centered vertically and horizontally inside the Cell (TextFormatFlags.VerticalCenter | TextFormatFlags.HorizontalCenter) and the Text default Padding is removed (TextFormatFlags.NoPadding).

using System.Collections.Generic;
using System.Drawing;
using System.Linq;

public class DrawingGrid
{
    private TextFormatFlags flags = TextFormatFlags.VerticalCenter | 
        TextFormatFlags.HorizontalCenter | TextFormatFlags.NoPadding;

    public DrawingGrid(int rows, int columns, float cellSize)
    {
        this.Grid = new List<GridCell>(rows * columns);
        BuildGrid(rows, columns, cellSize);
    }

    public List<GridCell> Grid { get; }
    public Font Font { get; set; } = SystemInformation.MenuFont;
    public Color TextColor { get; set; } = Color.DimGray;

    private void BuildGrid(int rows, int columns, float size)
    {
        for (int c = 0; c < columns; c++) {
            for (int r = 0; r < rows; r++) {
                Grid.Add(new GridCell(new RectangleF(c * size, r * size, size, size), $"{r},{c}"));
            }
        }
    }

    public void DrawGrid(Graphics g)
    {
        g.DrawRectangles(Pens.Black, Grid.Select(gc => gc.Cell).ToArray());

        foreach (var item in Grid) {
            TextRenderer.DrawText(g, item.Text, Font, Rectangle.Round(item.Cell), TextColor, flags);
        }
    }

    public class GridCell {
        public GridCell(RectangleF cellBounds, string text) {
            this.Cell = cellBounds;
            this.Text = text;
        }

        public RectangleF Cell { get; }
        public string Text { get; }
    }
}

这篇关于带坐标的平铺网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！