如何在 inkcanvas 上同时进行缩放和旋转？

Question

使用以下 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>

我尝试围绕图像中心旋转并使用鼠标滚轮进行缩放。我已经设置了这个变换组和事件：

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;
}

旋转很简单：

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

但是缩放正在屏幕上跳跃做各种奇怪的事情。缩放的代码在这里：

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;
}

我已经删除了尽可能多的动画等。希望只留下关键部分。我认为主要问题是scaleTransform.Center[X|Y]，因为即使我尝试在同一位置精确单击，返回的数字也遍布象限。 RenderTransformOrigin 似乎与中心位置没有任何区别，但我知道我需要它围绕中心旋转。

我做错了什么？

Answer 1

您需要抵消在 TranslateTransform 中更改 ScaleTranform 的 CenterX/Y 所产生的跳跃，这是来自 pan & 的片段。缩放控件我写道：

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);
        ...

希望您可以将其适应您的代码。在计算新中心的地方，您可能需要考虑 RotateTransform。