Tela con trasforma - qual è il modo migliore per disegnare una griglia

Question

Ho una tela WPF che posso scalare, scorrere e quant'altro. Ora voglio disegnare (piastrelle) le griglie su di esso - di preferenza a seconda della scala, il che significa che quando si ingrandisce le vecchie griglie svaniscono e nuovo (scala più grande, ma a causa di zoom apparentemente lo stesso) griglia Fade In

Ho sentito alcune persone che gridavano "Tilebrush!", Ma non posso google alcun esempio di esso.

Qualcuno può punto me nella giusta direzione - non solo alla pagina di MSDN del tilebrush, ma su come disegnare in modo efficiente le griglie sulla tela cartina? :)

Answer 1

La soluzione più semplice è quella di utilizzare un VisualBrush attirare la vostra griglia:

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

È possibile modificare la griglia regolando le coordinate viewport e la larghezza della griglia regolando il rettangolo di altezza e la larghezza (currrently 0,03).

Una soluzione più efficiente è disponibile utilizzando un DrawingBrush, ma lavorare con disegni non è così semplice. Questo disegna griglia utilizzando 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>

Per modificare la griglia come si esegue lo zoom out, semplicemente ricalcolare ogni volta che le modifiche di zoom. È possibile determinare quanto sia ingrandita in un dato visivo è con questo codice:

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 si vuole veramente "Fade In" la griglia, è possibile utilizzare due Canvasas sotto la vostra principale della tela di canapa, e impostare l'opacità sulle griglie più fini in funzione dello zoom esatto in uso.