在画布上拖放，拖放和调整图像大小 [英] Drag, drop and resize images on Canvas

问题描述

我想在通用Windows应用程序中创建一个拖放界面。用户可以将图像从 ListView （或类似的）拖放到一个 Canvas 中，可以调整其大小，移动图像。

I want to create a drag and drop interface in my Universal Windows App. Users will be able to drag and drop images from a ListView (or similar) to a Canvas where they can resize and move the images.

我已经发现如何移动图像，但现在我似乎找不到一种方式来接受多点触控，找到适当的图像来调整大小，并且调整图像本身的大小。

I have found how to move the images, but now I can't seem to find a way to accept multitouch, find the appropriate image to resize, and resize the image itself.

有没有一个简单的方法来实现？

Is there a simple way to do this?

推荐答案

这是我最终去的：

This is what I eventually went with:

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;

namespace KindEnGezin.Windows.Views.MenuItems
{
    public sealed partial class DrawView : Page
    {
        public DrawView()
        {
            InitializeComponent();
        }

        private void Image_OnManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
        {
            ((Image)sender).Opacity = 0.4;
        }

        private void Image_OnManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
        {
            var image = (Image)sender;
            var transform = (CompositeTransform)image.RenderTransform;

            // LEFT-RIGHT bounds
            if (e.Delta.Translation.X < 0) // Going left
            {
                if (DrawingArea.ActualWidth / 2 + (transform.TranslateX + e.Delta.Translation.X) - image.ActualWidth / 2 > 0)
                {
                    // Staying inside, apply translation
                    transform.TranslateX += e.Delta.Translation.X;
                }
                else
                {
                    // Trying to go outside, because scale sucks to work with, move image back inside
                    transform.TranslateX = image.ActualWidth / 2 - DrawingArea.ActualWidth / 2;
                }
            }
            else // Going right
            {
                if (DrawingArea.ActualWidth / 2 - (transform.TranslateX + e.Delta.Translation.X) +
                    image.ActualWidth * (0.5 - transform.ScaleX) > 0)
                {
                    // Staying inside, apply translation
                    transform.TranslateX += e.Delta.Translation.X;
                }
                else
                {
                    // Trying to go outside, because scale sucks to work with, move image back inside
                    transform.TranslateX = image.ActualWidth * (0.5 - transform.ScaleX) + DrawingArea.ActualWidth / 2;
                }
            }

            // UP-DOWN bounds
            if (e.Delta.Translation.Y < 0) // Going up
            {
                if (DrawingArea.ActualHeight / 2 + (transform.TranslateY + e.Delta.Translation.Y) - image.ActualHeight / 2 > 0)
                {
                    // Staying inside, apply translation
                    transform.TranslateY += e.Delta.Translation.Y;
                }
                else
                {
                    // Trying to go outside, because scale sucks to work with, move image back inside
                    transform.TranslateY = image.ActualHeight / 2 - DrawingArea.ActualHeight / 2;
                }
            }
            else // Going down
            {
                if (DrawingArea.ActualHeight / 2 - (transform.TranslateY + e.Delta.Translation.Y) +
                    image.ActualHeight * (0.5 - transform.ScaleY) > 0)
                {
                    // Staying inside, apply translation
                    transform.TranslateY += e.Delta.Translation.Y;
                }
                else
                {
                    // Trying to go outside, because scale sucks to work with, move image back inside
                    transform.TranslateY = image.ActualHeight * (0.5 - transform.ScaleY) + DrawingArea.ActualHeight / 2;
                }
            }

        }

        // Only allow scaling when both dimensions are smaller than the drawingarea
        if (image.ActualHeight*(transform.ScaleY*e.Delta.Scale) < DrawingArea.ActualHeight &&
            image.ActualWidth*(transform.ScaleX*e.Delta.Scale) < DrawingArea.ActualWidth)
        {
            transform.ScaleX *= e.Delta.Scale;
            transform.ScaleY *= e.Delta.Scale;
        }

        private void Image_OnManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
        {
            ((Image)sender).Opacity = 1;
        }
    }
}

和XAML： p>

and the XAML:

<Grid
    Name="DrawingArea">
    <Image
        Source="../../Assets/Images/BigLogo.png"
        Width="150"
        Height="150"
        ManipulationMode="TranslateX , TranslateY, Scale"
        ManipulationStarted="Image_OnManipulationStarted"
        ManipulationDelta="Image_OnManipulationDelta"
        ManipulationCompleted="Image_OnManipulationCompleted">
        <Image.RenderTransform>
            <CompositeTransform/>
        </Image.RenderTransform>
    </Image>
</Grid>

这只是使用一个静态名称，对于 Grid 包含这些图像。这样做可以动态地将图像添加到 Grid 。

This is only using one static name, for the Grid that contains these images. Doing this allows one to add images dynamically to the Grid.

我一直在搞乱试图阻止缩放当它超越边界时的形象，但是我有很多麻烦试图实现它，所以当我发现它试图移动到边界之外时，我将其移动到边界。

I have been messing around with trying to block scaling the image when it goes outside of the bounds, but I had a lot of trouble trying to implement it, so I just move it to the boundary when I detect it's trying to move outside of the bounds.

这篇关于在画布上拖放，拖放和调整图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！