Pre loader

How to keep the pixel aspect ratio of a zoomed-in image in a uniform heatmap constant?

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums


Currently, I’m using a uniform heatmap to display images taken from a monochrome camera. I’m using a RubberBandXyZoomModifier to allow to user to zoom in on a region of interest in the image. The SciChartSurface is set to be 640×480 (the image size) and is hosted in a Viewbox, so it’s size scales uniformly with the grid that it’s in. The problem I’m facing is that when I zoom in, the zoomed part of the image stretches to fit the 640×480 size, changing the pixel aspect ratio, but I want the pixel aspect ratio to stay constant so they are all square. What I want to happen is that extra space is added either on the top/bottom or left/right of the zoomed part of the image so the pixel aspect ratio stays constant. See the attached image for a visual explanation. I think I either need to change the SciChartSurface size or the GridLinesPanel size to match the zoomed area size, but I’m not sure how to go about doing that. Is there a way to achieve this? Thanks!

  • You must to post comments

Hi Ryan,

I think the easiest way to do this would be to subclass RubberBandXyZoomModifier.

The method PerformZoom accepts two points (corners of the zoom rectangle) to do the zoom. If you force that area to be square, it will always be uniform.

For example, something like this

     public class RubberBandXyZoomModifierEx : RubberBandXyZoomModifier
        public override void PerformZoom(Point startPoint, Point endPoint)
            Rect r = new Rect(startPoint, endPoint);
            r.Width = r.Height;
            base.PerformZoom(r.BottomLeft, r.TopRight);

There are other things you can do, such as forcing a uniform drag rectangle. In this case you’d want to override the OnModifierMouseMove method to ensure you are drawing a square.

Let me know if this helps,

Best regards,

  • Ryan Fessler
    Thanks! This was a good starting point to implement what I needed.
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.