Question

我为这个问题苦苦挣扎了两个星期。我正在应用拖动和缩放到canvas中的图像.Dragging工作正常并限制画布IsBoundary函数内部，但当我应用缩放其拖动区域更改。如果用鼠标拖动区域增加缩放也会增加，并且当我缩小尺寸时，拖动区域也会缩小。帮助我解决限制缩放的问题谢谢。这是我的代码链接 sample

Answer 1

我想我理解你的问题。缩放画布中的项目时，翻译需要考虑缩放比例的变化。是吗？

假设这个XAML：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Border Width="500"
            Height="500"
            BorderBrush="White"
            BorderThickness="1">
        <Canvas x:Name="MyCanvas">
            <Rectangle x:Name="MyRectangle"
                       Width="50"
                       Height="50"
                       Fill="CornflowerBlue">
                <Rectangle.RenderTransform>
                    <CompositeTransform TranslateX="225" TranslateY="225" />
                </Rectangle.RenderTransform>
            </Rectangle>
        </Canvas>
    </Border>
</Grid>

试试这个代码隐藏：

void MainPage_Loaded(object sender, RoutedEventArgs args)
{
    MyRectangle.ManipulationMode =
        ManipulationModes.TranslateX
        | ManipulationModes.TranslateY;
    var transform = MyRectangle.RenderTransform as CompositeTransform;
    var reposition = new Action<double, double>((x, y) =>
    {
        var size = new Size(MyRectangle.ActualWidth * transform.ScaleX, MyRectangle.ActualHeight * transform.ScaleY);
        var location = MyRectangle.TransformToVisual(MyRectangle).TransformPoint(new Point(0, 0));

        var minX = -location.X;
        var maxX = MyCanvas.ActualWidth - size.Width;
        var newX = Within(x, minX, maxX);
        transform.TranslateX = Within(newX, minX, maxX);

        var minY = -location.Y;
        var maxY = MyCanvas.ActualHeight - size.Height;
        var newY = Within(y, minY, maxX);
        transform.TranslateY = Within(newY, minY, maxY);
    });
    MyRectangle.ManipulationDelta += (s, e) =>
    {
        var newX = transform.TranslateX + e.Delta.Translation.X;
        var newY = transform.TranslateY + e.Delta.Translation.Y;
        reposition(newX, newY);
    };
    MyRectangle.PointerWheelChanged += (s, e) =>
    {
        // require control
        if (Window.Current.CoreWindow.GetKeyState(VirtualKey.Control)
            == Windows.UI.Core.CoreVirtualKeyStates.None)
            return;

        // ignore horizontal
        var props = e.GetCurrentPoint(MyRectangle).Properties;
        if (props.IsHorizontalMouseWheel)
            return;

        // apply scale
        var newScale = transform.ScaleX + (double)props.MouseWheelDelta * .001;
        transform.ScaleX = transform.ScaleY = newScale;

        // reposition
        reposition(transform.TranslateX, transform.TranslateY);
    };
}

public double Within(double value, double min, double max)
{
    if (value <= min)
        return min;
    else if (value >= max)
        return max;
    else
        return value;
}

我希望这会有所帮助。

注意：由于我现在不在触控机上，因此我实施了鼠标滚轮。但您可以根据需要修改代码。逻辑是相同的。

祝你好运！

如何限制窗口商店应用程序中画布内图像的转换

1 个答案: