Question

我需要在WPF中的画布上构建一个绘制网格线的函数：

example gridline

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

我该怎么做？

Answer 1

你真的不必用WPF“画”任何东西。如果要绘制线条，请使用适当的几何图形来绘制线条。

在你的情况下，它可能很简单。您只是绘制一个网格，因此您可以创建一个DrawingBrush来绘制单个网格方块并将其平铺以填充其余网格。要绘制瓷砖，您可以将其视为绘制X的。所以要有一个20x10图块（对应stepX和stepY）：

（p.s。，斜率slop是多余的，因为你已经有水平和垂直步长）

<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，width的起始位置为height（对应130x120和<DrawingBrush x:Key="OffsetGrid" Stretch="None" AlignmentX="Left" AlignmentY="Top"> <DrawingBrush.Transform>  <TranslateTransform X="30" Y="45" /> </DrawingBrush.Transform> <DrawingBrush.Drawing> <GeometryDrawing Brush="{StaticResource GridTile}" > <GeometryDrawing.Geometry>  <RectangleGeometry Rect="0,0 130,120" /> </GeometryDrawing.Geometry> </GeometryDrawing> </DrawingBrush.Drawing> </DrawingBrush>}：

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

然后最后使用它，只需将其设置为网格（或其他面板）的背景：

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

以下是它最终的结果：

final look

<小时/> 如果你想动态生成画笔，这里是基于上述XAML的等效函数：

{{1}}

如何在WPF Canvas上绘制网格线？

1 个答案: