Холст с трансформациями - как лучше всего нарисовать сетку - PullRequest
Новая
       33

Холст с трансформациями - как лучше всего нарисовать сетку

4 голосов
/ 18 ноября 2010

У меня есть холст WPF, который я могу масштабировать, прокручивать и все что угодно.Теперь я хочу нарисовать (мозаику) линии сетки на ней - предпочтительно в зависимости от масштаба, что означает, что когда вы уменьшаете масштаб, старые линии сетки исчезают и новые (больший масштаб, но из-за увеличения, казалось бы, того же самого) линии сетки исчезают.

Я слышал, как некоторые люди кричали "Tilebrush!", Но я не могу найти ни одного примера из этого.

Кто-нибудь может указать мне правильное направление - не только на страницу MSDNКисточка, а как эффективно рисовать линии сетки на моем масштабируемом холсте?:)

1 Ответ

5 голосов
/ 18 ноября 2010

Самое простое решение - использовать 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

Если вы действительно хотите «добавить» линии сетки, вы можете использовать два холста под основным холстом и установитьнепрозрачность на более тонких линиях сетки как функция точного увеличения при использовании.

...