Toile avec des transformations - quelle est la meilleure façon de dessiner une grille

Question

J'ai une toile WPF que je peux mettre à l'échelle, faire défiler et peu importe. Maintenant, je veux dessiner un quadrillage - 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 lignes de quadrillage s'affichent de nouveau (plus grande échelle, mais en raison du zoom apparemment identique).

J'ai entendu des gens crier "Tilebrush!", Mais je ne peux pas google n'importe quel exemple de cela.

Quelqu'un peut-il me diriger dans la bonne direction - pas seulement à la page MSDN de la tilebrush, mais sur la façon de dessiner efficacement le quadrillage sur ma toile zoomable? :)

Answer 1

La solution la plus simple consiste à utiliser un VisualBrush attirer votre quadrillages:

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

Il est possible de modifier le quadrillage en ajustant les coordonnées de fenêtre d'affichage et la largeur de ligne de grille en ajustant le rectangle hauteur et la largeur (currrently 0,03).

Une solution plus efficace est disponible en utilisant un DrawingBrush, mais travailler avec des dessins n'est pas aussi simple. Cela tire quadrillages en utilisant 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 changer les quadrillages que vous effectuez un zoom arrière, il suffit de les recalculer à chaque changement de zoom. Vous pouvez déterminer à quel point zoomée visuel est avec ce code 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 voulez vraiment « fade in » les quadrillages, vous pouvez utiliser deux Canvasas sous votre toile principale, et réglez l'opacité sur le quadrillage plus fin en fonction du zoom exact utilisé.