Canvas com transformações - qual é a melhor maneira de desenhar uma grade

Question

Eu tenho uma tela WPF que posso escalar, rolar e qualquer outra coisa. Agora, eu quero desenhar linhas de grade (ladrilhos) - de preferência, dependendo da escala, o que significa que, quando você amplia as linhas de grade antigas e as linhas de grade nova (maior, mas devido ao zoom aparentemente as mesmas linhas de grade) desaparecem.

Ouvi algumas pessoas gritando "Tilebrush!", Mas não posso pesquisar no Google nenhum exemplo disso.

Alguém pode me apontar na direção certa - não apenas para a página do MSDN da TileBrush, mas sobre como desenhar linhas de grade com eficiência na minha tela zoomável? :)

Answer 1

A solução mais fácil é usar um VisualBrush para desenhar suas linhas de grade:

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

Você pode alterar as linhas de grade ajustando as coordenadas da viewport e a largura da linha de grade ajustando a altura e a largura do retângulo (currentemente 0,03).

Uma solução mais eficiente está disponível usando um desenho, mas trabalhar com desenhos não é tão simples. Isso desenha linhas de grade usando um arremesso de desenho:

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

Para alterar as linhas de grade à medida que você diminui, recompure -as sempre que o zoom mudar. Você pode determinar o quão ampliado é um determinado visual com este código:

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

Se você realmente deseja "desaparecer" nas linhas de grade, pode usar duas lonvasas na sua tela principal e definir a opacidade nas linhas de grade mais finas em função do zoom exato em uso.