Canvas mit Transformationen - was ist der beste Weg, um ein Raster zu zeichnen

Question

Ich habe eine WPF-Leinwand, dass ich skaliert werden kann, blättern und was auch immer. Jetzt möchte ich zeichnen (Kacheln) Rasterlinien auf sie - vorzugsweise in Abhängigkeit von der Skala, was bedeutet, dass, wenn man die alten Gitterlinien abklingen verkleinern und neu (größeren Maßstab, aber aufgrund Zoomen scheinbar die gleichen) Rasterlinien verblassen in

Ich habe einige Leute gehört zu schreien „TileBrush!“, Aber ich kann kein Beispiel davon nicht Google.

Kann jemand Punkt mich in der richtigen Richtung - nicht nur auf die MSDN-Seite des TileBrush, sondern darauf, wie effizient Rasterlinien auf meiner zoombaren Leinwand zeichnen? :)

Answer 1

Die einfachste Lösung ist ein VisualBrush zu benutzen, um Ihre Rasterlinien zu ziehen:

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

Sie können die Gitternetzlinien ändern, indem das Ansichtsfenster Koordinaten einzustellen und die Gitternetz-Breite, die durch das Rechteck Höhe und Breite eingestellt (currrently 0,03).

Eine effizientere Lösung ist es, eine DrawingBrush verwenden, aber mit Zeichnungen arbeitet, ist nicht so einfach. Dies zieht Rasterlinien mit einem 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>

Um die Rasterlinien zu ändern, wie Sie verkleinern, so dass sie nur neu berechnet, wenn die Zoom-Änderungen. Sie können einfach bestimmen, wie gezoomten in einem bestimmten visuellen mit diesem Code ist:

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

Wenn Sie wirklich „fade in“ wollen die Gitternetzlinien können Sie zwei Canvasas unter Ihrer Haupt-Leinwand verwenden, und stellen Sie die Opazität auf den feineren Raster als Funktion des genauen Zoom verwendet wird.