Keep relative positions over MultiScaleImage

Question

I implemented the following Silverlight app after seeing this instructions, here's my code:

public partial class MainPage : UserControl
{
    private Point lastMousePos = new Point();
    private double zoom = 1;
    private Point lastMouseLogicaPos = new Point();
    private Point lastMouseViewPort = new Point();
    private bool duringDrag = false;
    private bool duringOpen = false;
    private List<Dot> dots = new List<Dot>();
    private bool addDot = false;

    public MainPage()
    {
        InitializeComponent();

        this.MouseMove += delegate(object sender, MouseEventArgs e)
        { this.lastMousePos = e.GetPosition(this.ZoomImage); };

        ZoomImage.MouseWheel += new MouseWheelEventHandler(ZoomImage_MouseWheel);
        this.ZoomImage.UseSprings = false;
    }

    private void ZoomImage_MouseWheel(object sender, MouseWheelEventArgs e)
    {
        double newzoom = zoom;

        if (e.Delta > 0)
        { newzoom /= 1.3; }
        else
        { newzoom *= 1.3; }

        Point logicalPoint = this.ZoomImage.ElementToLogicalPoint(this.lastMousePos);
        this.ZoomImage.ZoomAboutLogicalPoint(zoom / newzoom, logicalPoint.X, logicalPoint.Y);

        zoom = newzoom;
        e.Handled = true;
    }

    private void ZoomImage_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
    {
        lastMouseLogicaPos = e.GetPosition(LayoutRoot);
        lastMouseViewPort = this.ZoomImage.ViewportOrigin;

        foreach (var dot in this.dots)
        { dot.LastMouseLogicPos = e.GetPosition(LayoutRoot); }

        if (!this.addDot)
        { duringDrag = true; }
    }

    private void ZoomImage_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
    {
        if (this.addDot)
        {
            Dot dot = new Dot(this.lastMouseLogicaPos.X, this.lastMouseLogicaPos.Y) 
                                { Name = "Dot" + (this.dots.Count + 1).ToString() };

            this.dots.Add(dot);
            this.DotCanvas.Children.Add(dot);
        }
        else
        { duringDrag = false; }
    }

    private void ZoomImage_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
    {
        if (duringDrag)
        {
            double zoomFactor = 1 / this.ZoomImage.ViewportWidth;
            Point newPoint = lastMouseViewPort;
            Point thisMouseLogicalPos = e.GetPosition(LayoutRoot);
            newPoint.X += (lastMouseLogicaPos.X - thisMouseLogicalPos.X) / (this.ZoomImage.ActualWidth * zoomFactor);
            newPoint.Y += (lastMouseLogicaPos.Y - thisMouseLogicalPos.Y) / (this.ZoomImage.ActualWidth * zoomFactor);
            this.ZoomImage.ViewportOrigin = newPoint;

            foreach (var dot in this.dots)
            {
                Point dotLogicPoint = this.ZoomImage.ElementToLogicalPoint(new Point(dot.X, dot.Y));
                thisMouseLogicalPos = e.GetPosition(LayoutRoot);

                dotLogicPoint.X -= (dot.LastMouseLogicPos.X - thisMouseLogicalPos.X) / ((1 / 1.8) * this.ZoomImage.ViewportWidth);
                dotLogicPoint.Y -= (dot.LastMouseLogicPos.Y - thisMouseLogicalPos.Y) / (this.ZoomImage.ActualWidth * this.ZoomImage.ViewportWidth);

                dot.X = (this.ZoomImage.LogicalToElementPoint(locLogicPoint).X);
                dot.Y = (this.ZoomImage.LogicalToElementPoint(locLogicPoint).Y);
            }
        }
    }

    private void ZoomImage_ImageOpenSucceeded(object sender, System.Windows.RoutedEventArgs e)
    { duringOpen = true; }

    private void ZoomImage_MotionFinished(object sender, System.Windows.RoutedEventArgs e)
    {
        if (duringOpen)
        { duringOpen = false; }
    }

    private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
    {
        this.addDot = !this.addDot;

        if (this.addDot)
        { this.btnAddDot.Content = "Click on Image"; }
        else
        { this.btnAddDot.Content = "Add Dot"; }
    }
}

With this I can zoom and pan on a MultiScaleImage and add my custom Dot object to the DotCanvas canvas. Here's the XAML:

<UserControl x:Class="DeepZoomSample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400" Width="800" Height="600">

<Grid x:Name="LayoutRoot" Background="Black" Margin="0,0,-98,-86">

    <MultiScaleImage x:Name="ZoomImage" Source="GeneratedImages/dzc_output.xml" 
                     Margin="8,8,0,0" MouseLeftButtonDown="ZoomImage_MouseLeftButtonDown" 
                     MouseLeftButtonUp="ZoomImage_MouseLeftButtonUp" MouseMove="ZoomImage_MouseMove" ImageOpenSucceeded="ZoomImage_ImageOpenSucceeded" 
                     MotionFinished="ZoomImage_MotionFinished" Height="584" VerticalAlignment="Top" HorizontalAlignment="Left" Width="784"/>

    <Canvas x:Name="DotCanvas" HorizontalAlignment="Left" Height="584" Margin="8" VerticalAlignment="Top" Width="784" MouseLeftButtonUp="LocationCanvas_MouseLeftButtonUp"/>
    <Button x:Name="btnAddDot" Content="Add Location" HorizontalAlignment="Right" Height="44" Margin="0,0,24,24" VerticalAlignment="Bottom" Width="112" Click="Button_Click"/>

</Grid>

Now, the problem is that, since the Dots are placed in a canvas that's over the MultiScateImage (ZoomImage object) when I pan and zoom the Dots will stay in their respective place over the canvas. This code has some missed tries trying to keep the Dots on place while the image is panning and zooming.

Here's an image of the app, the blue dots around are my custom Dot object:

The main question is, how can I keep the Dots in their relative place over the image while the user zooms and pans.

Answer 1

It is tricky but definitely can be done, I recently did the same for a similar application. I won't lie, it took me several hours to get it working, so prepare for some headscratching.

There are basically two things involved:

1. positioning the dots in the right place

Math is your friend here. You will have to create some methods that transpose the multiScaleImage-based coordinates to your canvas (i.e. the viewport) coordinates.

First, you'll have to understand in depth ViewPortOrigin and ViewPortWidth (this is a very good start). They have a couple of caveats (for ex. I seem to recall that viewPortHeight has to be multiplied by the image ratio to get the actual value -or something similar).

To point you towards the solution: you will have to subtract viewPortOrigin and multiply/divide by viewPortWidth. If you are patient (and lucky ;-) ) tonight I'll look at my project and post some code, but it's good if you really understand those parameters -otherwise it will be tricky to debug and troubleshoot.

Something that helped me a lot understanding what was going on was to put some textblocks around and display viewportWidth/Origin/etc. all the time while navigating the multiscaleImage.

edit: you are lucky, I remembered this -so here is some code that should help. Again, I suggest you don't just copy & paste without understanding as you won't get that far.

private Point CanvasToDeepZoom(MultiScaleImage msi, Point absoluteInsideCanvas)
{
    // the only non-logical (to me) step: viewportOrigin.Y must be multiplied by the aspectRatio
    var ViewportHeight = msi.ViewportWidth * msi.AspectRatio * msi.ActualHeight / msi.ActualWidth;

    var relativeToCanvas = new Point(
        absoluteInsideCanvas.X / msi.ActualWidth,
        absoluteInsideCanvas.Y / msi.ActualHeight);

    return new Point(
        msi.ViewportOrigin.X + msi.ViewportWidth * relativeToCanvas.X,
        msi.ViewportOrigin.Y * msi.AspectRatio + ViewportHeight * relativeToCanvas.Y);
}


private Point DeepZoomToCanvas(MultiScaleImage msi, Point relativeInsideDeepZoom)
{
    var ViewportHeight = msi.ViewportWidth * msi.AspectRatio * msi.ActualHeight / msi.ActualWidth;

    var relativeToCanvas = new Point(
        (relativeInsideDeepZoom.X - msi.ViewportOrigin.X) / msi.ViewportWidth,
        (relativeInsideDeepZoom.Y - msi.ViewportOrigin.Y * msi.AspectRatio) / ViewportHeight);

    return new Point(
        relativeToCanvas.X * msi.ActualWidth,
        relativeToCanvas.Y * msi.ActualHeight);
 }

2. keeping the dots in sync during zoom and pan animation.

The basic idea is to loop a 0 seconds-long animation that keeps updating your points position for the whole duration of the zoom/pan (1.5 seconds if I remember correctly). the technique is explained very well here. In that blog you will also find other useful resources for your particular problem.