canvas - 带有变换的画布 - 绘制网格的最佳方法是什么

Question

我有一个 WPF 画布，我可以缩放、滚动等等。现在我想在上面绘制（平铺）网格线 - 最好取决于比例，这意味着当你缩小旧的网格线时，新的（更大的比例，但由于缩放看似相同）网格线会淡入。

我听到有人大喊“Tilebrush！”，但我无法在谷歌上搜索任何例子。

任何人都可以指出我正确的方向 - 不仅仅是瓷砖画笔的 MSDN 页面，还有如何在我的可缩放画布上有效地绘制网格线？:)

Answer 1

最简单的解决方案是使用 VisualBrush 绘制网格线：

<Canvas>
  <Canvas.Background>
    <VisualBrush TileMode="Tile" Stretch="Fill" Viewport="0 0 50 50" ViewportUnits="Absolute" ViewboxUnits="Absolute" >
      <VisualBrush.Visual>
        <Grid>
          <Rectangle Width="1" Height="0.03" Fill="Gray" HorizontalAlignment="Left" VerticalAlignment="Top" />
          <Rectangle Height="1" Width="0.03" Fill="Gray" HorizontalAlignment="Left" VerticalAlignment="Top" />
        </Grid>
      </VisualBrush.Visual>
    </VisualBrush>
  </Canvas.Background>
</Canvas>

您可以通过调整视口坐标和网格线宽度来更改网格线，方法是调整矩形高度和宽度（当前为 0.03）。

使用 DrawingBrush 可以获得更有效的解决方案，但使用绘图并不那么简单。这使用 DrawingBrush 绘制网格线：

<Canvas>
  <Canvas.Background>
    <DrawingBrush TileMode="Tile" Stretch="Fill" Viewport="0 0 50 50" ViewportUnits="Absolute" ViewboxUnits="Absolute" >
      <DrawingBrush.Drawing>
        <GeometryDrawing Geometry="M0,0 L0,1 0.03,1 0.03,0.03 1,0.03 1,0 Z" Brush="Gray" />
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Canvas.Background>
</Canvas>

要在缩小时更改网格线，只需在缩放更改时重新计算它们。您可以使用以下代码确定给定视觉对象的放大程度：

var zoom = visual
             .TransformToAncestor(Window.FromVisual(visual))
             .Transform(new Point(1,1));

if(zoom.X>10 || zoom.Y>10)
  // Use finer gridlines
else
  // Use coarser gridlines

如果您真的想“淡入”网格线，您可以在主 Canvas 下使用两个 Canvasas，并将更精细的网格线上的不透明度设置为使用中的精确缩放功能。