如何限制窗口商店应用程序中画布内图像的转换 [英] How to limit transformation of images inside canvas in window store app

问题描述

我已经为这个问题苦苦挣扎了两个星期.我正在对画布内的图像应用拖动和缩放.拖动工作正常，并且限制了画布内的 IsBoundary 函数，但是当我应用缩放时，其拖动区域会发生变化.如果随着鼠标拖动区域的增加缩放也会增加并且我让它缩小拖动区域的大小也会缩小.帮助我解决这个限制缩放的问题谢谢.这是我的代码链接示例

I have been struggling for two weeks for this problem . I am applying dragging and scaling to an image inside canvas.Dragging works fine and is limiting inside canvas IsBoundary functions but when I am applying scaling its drag area changes . If increases scaling with mouse drag area increases also and whem I make it shrink in size drag area also shrinks.Help me to solve this problem of limiting scaling Thanks. Here is my code link sample

推荐答案

我想我理解你的问题.当您在画布中缩放项目时，翻译需要考虑缩放的变化.是吗?

I think I understand your question. When you scale an item in a canvas the translation needs to account for the change in scale. Is that right?

假设这个 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;
}

我希望这会有所帮助.

注意:由于我现在不在触摸机上，所以我实现了鼠标滚轮来缩放.但是您可以根据需要修改代码.逻辑将是相同的.

Note: Since I am not on a touch machine right now, I implemented the mouse wheel to scale. But you can modify the code as you want. The logic would be identical.

祝你好运！

这篇关于如何限制窗口商店应用程序中画布内图像的转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！