我需要在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画布?
发布评论