Làm thế nào để vẽ đường lưới trên WPF Canvas?

Question

tôi cần phải xây dựng một bản vẽ Gridline chức năng trên vải trong WPF:

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

Làm thế nào tôi sẽ đi về điều này?

Answer 1

Bạn không thực sự phải "vẽ" bất kỳ thứ gì với WPF. Nếu bạn muốn vẽ các đường thẳng, hãy sử dụng các hình dạng thích hợp để vẽ chúng.

Trong trường hợp của bạn, điều này có thể thực sự đơn giản. Bạn chỉ cần vẽ một lưới để bạn có thể chỉ cần tạo ra một DrawingBrush để vẽ một ô lưới vuông và gạch nó để điền vào phần còn lại. Để vẽ hình xếp của bạn, bạn có thể nghĩ nó là bản vẽ X. Vì vậy, để có một gạch 20x10 (tương ứng với stepX và stepY):

(ps, độ dốc slop là không cần thiết vì bạn đã có các kích thước bước ngang và dọc)

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

Đó sẽ chăm sóc của bản vẽ những dòng kẻ. Bây giờ để có thể vẽ chúng trong lưới của bạn từ các cạnh, bạn cần phải có một bàn chải khác, nơi bạn vẽ một hình chữ nhật với kích thước mong muốn, đầy gạch của bạn. Vì vậy, để có một vị trí bắt đầu của (30, 45) (tương ứng với startX và startY) với width và 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> 

Rồi cuối cùng để sử dụng nó, chỉ cần đặt nó làm nền lưới của bạn (hoặc bảng điều khiển khác) :

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

Sau đây là cách nó kết thúc lên trông như:

---

Nếu bạn muốn tạo bàn chải tự động, đây là một chức năng tương đương dựa trên XAML trên:

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