如何绘制网格线在WPF画布？ [英] How to draw gridline on WPF Canvas?

问题描述

我需要在WPF画布上建立一个功能绘制网格线：

I need to build a function drawing gridline on the canvas in WPF:

void DrawGridLine(double startX, double startY, double stepX, double stepY, 
                  double slop, double width, double height)
{
    // How to implement draw gridline here?
}

我会如何呢？

How would I go about this?

推荐答案

您真的没有画与WPF什么。如果你想画线，使用适当的几何形状，以吸引他们。

You don't really have to "draw" anything with WPF. If you want to draw lines, use the appropriate geometries to draw them.

在你的情况下，它可能真的很简单。你只是画一个网格，使你可以只创建一个 DrawingBrush 来绘制一个方格和瓷砖它填补了休息。要绘制的瓷砖，你可以把它看作绘制X的。所以，有一个 20×10 瓦（相当于 stepX 和 stepY ）：

In your case it could be simple really. You're just drawing a grid so you could just create a DrawingBrush to draw a single grid square and tile it to fill in the rest. To draw your tile, you could think of it as drawing X's. So to have a 20x10 tile (which corresponds to stepX and stepY):

（PS，斜率斜率是多余的，因为你已经拥有水平和垂直步长）

(p.s., the slope slop is redundant since you already have the horizontal and vertical step sizes)

<DrawingBrush x:Key="GridTile" Stretch="None" TileMode="Tile"
              Viewport="0,0 20,10" ViewportUnits="Absolute">
                  <!-- ^^^^^^^^^^^ set the size of the tile-->
    <DrawingBrush.Drawing>
        <GeometryDrawing>
            <GeometryDrawing.Geometry>
                <!-- draw a single X -->
                <GeometryGroup>
                    <!-- top-left to bottom-right -->
                    <LineGeometry StartPoint="0,0" EndPoint="20,10" />

                    <!-- bottom-left to top-right -->
                    <LineGeometry StartPoint="0,10" EndPoint="20,0" />
                </GeometryGroup>
            </GeometryDrawing.Geometry>
            <GeometryDrawing.Pen>
                <!-- set color and thickness of lines -->
                <Pen Thickness="1" Brush="Black" />
            </GeometryDrawing.Pen>
        </GeometryDrawing>
    </DrawingBrush.Drawing>
</DrawingBrush>

这需要绘制线条的照顾。我们能够利用他们在您的网格从边缘偏移，你需要有，你画一个矩形所需尺寸又刷，充满了你的瓷砖。因此，为了有一个起始位置（30，45）（对应于 STARTX 和 startY ）的宽度和高度， 130x120 ：

That takes care of drawing the lines. Now to be able to draw them offset in your grid from the edges, you need to have another brush where you draw a rectangle with the desired dimensions, filled with your tiles. So to have a starting position of (30, 45) (corresponding to startX and startY) with the width and height, 130x120:

<DrawingBrush x:Key="OffsetGrid" Stretch="None" AlignmentX="Left" AlignmentY="Top">
    <DrawingBrush.Transform>
        <!-- set the left and top offsets -->
        <TranslateTransform X="30" Y="45" />
    </DrawingBrush.Transform>
    <DrawingBrush.Drawing>
        <GeometryDrawing Brush="{StaticResource GridTile}" >
            <GeometryDrawing.Geometry>
                <!-- set the width and height filled with the tile from the origin -->
                <RectangleGeometry Rect="0,0 130,120" />
            </GeometryDrawing.Geometry>
        </GeometryDrawing>
    </DrawingBrush.Drawing>
</DrawingBrush>

后来终于来使用它，将它设置为网格的背景（或其他面板）：

Then finally to use it, just set it as the background of your grid (or other panel):

<Grid Background="{StaticResource OffsetGrid}">
    <!-- ... -->
</Grid>

下面是它的最终看起来像：

Here's how it ends up looking like:

---

如果要动态地生成刷，这里的基于上述XAML等价功能：

---

If you want to generate the brush dynamically, here's an equivalent function based on the above XAML:

static Brush CreateGridBrush(Rect bounds, Size tileSize)
{
    var gridColor = Brushes.Black;
    var gridThickness = 1.0;
    var tileRect = new Rect(tileSize);

    var gridTile = new DrawingBrush
    {
        Stretch = Stretch.None,
        TileMode = TileMode.Tile,
        Viewport = tileRect,
        ViewportUnits = BrushMappingMode.Absolute,
        Drawing = new GeometryDrawing
        {
            Pen = new Pen(gridColor, gridThickness),
            Geometry = new GeometryGroup
            {
                Children = new GeometryCollection
                {
                    new LineGeometry(tileRect.TopLeft, tileRect.BottomRight),
                    new LineGeometry(tileRect.BottomLeft, tileRect.TopRight)
                }
            }
        }
    };

    var offsetGrid = new DrawingBrush
    {
        Stretch = Stretch.None,
        AlignmentX = AlignmentX.Left,
        AlignmentY = AlignmentY.Top,
        Transform = new TranslateTransform(bounds.Left, bounds.Top),
        Drawing = new GeometryDrawing
        {
            Geometry = new RectangleGeometry(new Rect(bounds.Size)),
            Brush = gridTile
        }
    };

    return offsetGrid;
}

这篇关于如何绘制网格线在WPF画布？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！