How can I do both zoom and rotate on an inkcanvas?

Question

Using the following XAML:

<Grid x:Name="grid" Background="LightBlue" ClipToBounds="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
    <Viewbox x:Name="imgViewbox" >
                <InkCanvas Grid.Row="0" Name="inkCanvas" Background="Red" >
                <Image Source="Images/pic.png" HorizontalAlignment="Left" x:Name="imgObject" VerticalAlignment="Top"  />
                <Label>Testing</Label>
                </InkCanvas>
    </Viewbox>
</Grid>

I am trying to rotate around the center of the image and also use the wheel mouse to zoom. I have set up this transform group and event:

public MainWindow() {

    InitializeComponent();
    DataContext = new MainWindowViewModel();

    transformGroup = new TransformGroup();
    scaleTransform = new ScaleTransform();
    rotateTransform = new RotateTransform();
    translateTransform = new TranslateTransform();
    transformGroup.Children.Add(rotateTransform);
    transformGroup.Children.Add(scaleTransform);
    transformGroup.Children.Add(translateTransform);

    imgViewbox.RenderTransform = transformGroup;

    imgViewbox.MouseWheel += ImageViewboxMouseWheel;
}

Rotate is simple:

void Rotate(object sender, RoutedEventArgs e) {
    //imgViewbox.RenderTransformOrigin = new Point(0.5,0.5);
    rotateTransform.Angle += 90;
}

but zoom is doing all sorts of weird stuff jumping around the screen. The code for zoom is here:

void ImageViewboxMouseWheel(object sender, MouseWheelEventArgs e) {
    //imgViewbox.RenderTransformOrigin = new Point(0, 0);
    double zoomFactor = DefaultZoomFactor;
    if (e.Delta <= 0) zoomFactor = 1.0 / DefaultZoomFactor;
    // DoZoom requires both the logical and physical location of the mouse pointer
    var physicalPoint = e.GetPosition(imgViewbox);
    if (transformGroup.Inverse != null) {
        DoZoom(zoomFactor, transformGroup.Inverse.Transform(physicalPoint), physicalPoint);
    }
    else {
        throw new ArgumentException("Missing Inverse");
    }

    //Set the center point of the ScaleTransform object to the cursor location.
    scaleTransform.CenterX = e.GetPosition(imgViewbox).X;
    scaleTransform.CenterY = e.GetPosition(imgViewbox).Y;
    Debug.WriteLine(string.Format("IVMW Center {0},{1}", scaleTransform.CenterX, scaleTransform.CenterY));
}

public void DoZoom(double deltaZoom, Point mousePosition, Point physicalPosition) {
    double currentZoom = scaleTransform.ScaleX;
    currentZoom *= deltaZoom;

    translateTransform.X = -1*(mousePosition.X*currentZoom - physicalPosition.X);
    translateTransform.Y = -1*(mousePosition.X*currentZoom - physicalPosition.Y);
    scaleTransform.ScaleX = currentZoom;
    scaleTransform.ScaleY = currentZoom;
}

I have removed as much as I can, animations and such. Hopefully leaving only the key parts. I believe that the major problem is the scaleTransform.Center[X|Y] as the numbers that are being returned are all over the quadrant even when I try to click exactly in the same location. The RenderTransformOrigin doesn't seem to make any difference with the Center position but I am aware that I need it to rotate around center.

What am I doing wrong?

Answer 1

You need to offset the jump you get from changing the ScaleTranform's CenterX/Y in the TranslateTransform, here is a snippet from a pan & zoom control i wrote:

private void This_MouseWheel(object sender, MouseWheelEventArgs e)
{
    if (IsZoomEnabled)
    {
        Point cursorPos = e.GetPosition(this);
        Point newCenter = _scaleT.Inverse.Transform(_translateT.Inverse.Transform(cursorPos));
        Point oldCenter = new Point(_scaleT.CenterX, _scaleT.CenterY);
        Vector oldToNewCenter = newCenter - oldCenter;
        _scaleT.CenterX = newCenter.X;
        _scaleT.CenterY = newCenter.Y;
        _translateT.X += oldToNewCenter.X * (_scaleT.ScaleX - 1.0);
        _translateT.Y += oldToNewCenter.Y * (_scaleT.ScaleY - 1.0);
        ...

Hopefully you can adapt this to your code. Where the new center is calculated you might need to take your RotateTransform into account.