Question

I have this problem.

So I have a bunch of data that must be visualized on a canvas (say more than 5000 items). So I draw them as a bunch of vertical rectangles over a horizontal line, some thing like this:

—|–|||||—|—|||—||—-|||||||——–

Now, because the canvas is small, I only draw a different amount of rectangles at different zoom level. So if I zoom in more, the line get longer, and more rectangles I can see.

Problem is every time I zoom in, I have to clear the whole canvas, and redaw everything with the new zoom scale. And it is really suck, the drawing is slow and scaling not really nice.

So I wondering is there a way I can achieve a faster drawing, and good zooming (like those vector graph, you can zoom in unlimited)??

Answer 1

Have you tried ScaleTransform Class?

<Canvas.RenderTransform>
    <ScaleTransform ScaleX="2" ScaleY="2" />
</Canvas.RenderTransform>

See How to: Scale an Element too. For performance reasons:

• Freeze your Freezables.

• Update Rather than Replace a RenderTransform

  You may be able to update a Transform rather than replacing it as the
  value of a RenderTransform property. This is particularly true in
  scenarios that involve animation. By updating an existing Transform,
  you avoid initiating an unnecessary layout calculation.