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

Question

我有一个 WPF Canvas ，可以缩放、滚动等等。现在我想在其上绘制(平铺)网格线 - 最好根据比例，这意味着当您缩小时，旧的网格线会逐渐消失，而新的(更大的比例，但由于缩放看起来相同)网格线会淡入。

我听到有人大喊“Tilebrush!”，但我无法在 google 上搜索到任何相关示例。

任何人都可以为我指出正确的方向 - 不仅是tilebrush 的 MSDN 页面，而且还包括如何在可缩放 Canvas 上有效地绘制网格线？ :)

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>

您可以通过调整视口(viewport)坐标来更改网格线，通过调整矩形的高度和宽度(当前为 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 下使用两个 Canvas ，并将更精细的网格线上的不透明度设置为使用的精确缩放的函数。