Canvas avec transformations - quelle est la meilleure façon de dessiner une grille ?

Question

J'ai un canevas WPF que je peux mettre à l'échelle, faire défiler et tout ce que je veux. Je veux maintenant y dessiner des quadrillages (en mosaïque) - de préférence en fonction de l'échelle, ce qui signifie que lorsque vous effectuez un zoom arrière, les anciens quadrillages disparaissent et les nouveaux (à une échelle plus grande, mais apparemment identiques en raison du zoom) apparaissent en fondu enchaîné.

J'ai entendu des gens crier "Tilebrush !", mais je n'ai trouvé aucun exemple sur Google.

Quelqu'un peut-il m'indiquer la bonne direction - pas seulement la page MSDN du tilebrush, mais aussi comment dessiner efficacement des lignes de quadrillage sur mon canevas zoomable ?)

Answer 1

La solution la plus simple consiste à utiliser un VisualBrush pour dessiner les lignes de la grille :

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

Vous pouvez modifier les lignes de la grille en ajustant les coordonnées de la fenêtre et la largeur de la grille en ajustant la hauteur et la largeur du rectangle (actuellement 0,03).

Une solution plus efficace consiste à utiliser un DrawingBrush, mais le travail avec les dessins n'est pas aussi simple. Cette méthode permet de dessiner des lignes de quadrillage à l'aide d'un 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>

Pour modifier les quadrillages lorsque vous effectuez un zoom arrière, il suffit de les recalculer chaque fois que le zoom change. Ce code permet de déterminer le degré de zoom d'un visuel donné :

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

Si vous souhaitez vraiment "estomper" les lignes de la grille, vous pouvez utiliser deux canevas sous votre canevas principal et régler l'opacité des lignes les plus fines en fonction du zoom exact utilisé.