4

拡大縮小、スクロールなどが可能なWPFキャンバスがあります。ここで、グリッド線を描画(タイリング)したいと思います。できればスケールに応じて、古いグリッド線がフェードアウトし、新しい(スケールは大きくなりますが、ズームが同じように見えるため)グリッド線がフェードインします。

「Tilebrush!」と叫ぶ人がいるのを聞いたことがありますが、その例をグーグルで検索することはできません。

タイルブラシのMSDNページだけでなく、ズーム可能なキャンバスにグリッド線を効率的に描画する方法について、誰かが私を正しい方向に向けることができますか?:)

4

1 に答える 1

5

最も簡単な解決策は、VisualBrushを使用してグリッド線を描画することです。

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

ビューポート座標を調整してグリッド線を変更し、長方形の高さと幅(現在は0.03)を調整してグリッド線の幅を変更できます。

DrawingBrushを使用すると、より効率的なソリューションを利用できますが、図面の操作はそれほど単純ではありません。これは、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>

ズームアウト時にグリッド線を変更するには、ズームが変更されるたびにグリッド線を再計算します。このコードを使用して、特定のビジュアルがどの程度ズームインされているかを判断できます。

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

グリッド線を本当に「フェードイン」したい場合は、メインのキャンバスの下に2つのCanvasasを使用し、使用中の正確なズームの関数として、より細かいグリッド線の不透明度を設定できます。

于 2010-11-17T23:21:39.823 に答える