Xamarin 窗体在视图之间拖动图像答案

【问题标题】：Xamarin Forms Drag Image between ViewsXamarin 窗体在视图之间拖动图像
【发布时间】：2018-09-06 00:20:08
【问题描述】：

我在 Xamarin Forms 中有一个应用程序，我需要用户可以从下面选择一个图像并在顶部视图中拖动到任何他想要的位置，想法是：带有图像的下面视图是家庭房间，并且顶视图是室内植物，用户可以通过拖动和旋转图像来创建自己的室内植物，最后将顶视图保存为jpg或png图像。

我在这里搜索了 2 3 页关于拖动等的谷歌，但我没有找到任何可以帮助我的东西，我尝试了平移手势，点击手势，但没有成功 =[

对不起，如果它是重复的什么的，这是我的第一篇文章，我真的找不到任何东西。

如何在 Xamarin.Forms 中或至少使用自定义渲染器等实现此功能？

谢谢你们。

Sample image of what I need

【问题讨论】：

嗯，我怀疑这些图像可以在屏幕上部的任何地方移动
@G.hakim，是的，我也这么认为...... =[，也许如果我有一个主视图，然后是 2 个孩子（底部和顶部），然后当用户点击图像时在底部视图中，我可以分离并放入主视图，我不知道 =[，我认为目前我不能这样做
你不会为此找到现成的东西，但如果你有时间，它肯定可以毫无问题地完成。

标签： c# ios xamarin xamarin.forms xamarin.android

【解决方案1】：

对于您在 XAML 中的图像：

<Image Source="plant.png" x:Name="image"/>

您实际上可以使用平移手势识别器在 C# 中拖放图像：

定义变量：

double x; // totalX for the pan gesture
double y; // totalY for the pan gesture

初始化平移手势并将其添加到图像中：

PanGestureRecognizer panGesture = new PanGestureRecognizer();
panGesture.PanUpdated += PanUpdated;
image.GestureRecognizers.Add(panGesture);

手势的事件处理程序：

void PanUpdated(object sender, PanUpdatedEventArgs args)
{
    if (args.StatusType.Equals(GestureStatus.Running)) {
        x = args.TotalX;
        y = args.TotalY;

        image.TranslateTo(x, y, 1);
    }
    else if (args.StatusType.Equals(GestureStatus.Completed)) {
        // set the layout bounds of the image to the new position
        // method varies depending on what type of layout you are using for the image

        // eg. assume the image is in an absolute layout
        // where the layout height is the screen height
        // and the layout width is the screen width

        Task.Run(() => {
            Device.BeginInvokeOnMainThread(async () => // run UI task on main thread
            {
                await Task.Delay(50); // avoid flickering

                var screenWidth = Application.Current.MainPage.Width;
                var screenHeight = Application.Current.MainPage.Height;

                var b = image.Bounds;
                var newBounds = new Rectangle(b.X + x, b.Y + y, b.Width, b.Height);

                var newAbsoluteBound =
                    new Rectangle(newBounds.X / (screenWidth - newBounds.Width),
                                  newBounds.Y / (screenHeight - newBounds.Height),
                                  newBounds.Width / screenWidth,
                                  newBounds.Height / screenHeight);

                // set new absolute bounds so a new TranslateTo can be applied

                AbsoluteLayout.SetLayoutBounds(image, newAbsoluteBound);
                await image.TranslateTo(0, 0, 0);
            });
        });              
    }
}

【讨论】：

感谢您的快速回答，我会尝试的，但是视图呢？我的意思是，用户选择图像的底部视图可能是网格/滚动视图，而顶部视图将是绝对/堆栈，当用户点击时，我是否需要将图像从网格/滚动视图中分离？
您可能必须在删除图像时将其分离并添加到新视图中
是的...我会尝试并让你们知道，感谢您的关注，我认为目前在 Xamarin 中会很困难

【解决方案2】：

确保您的页面或图像不在滚动视图中。如果两个方向都启用了 ScrollView，则 Pan-Gesture 将不起作用。 . .

【讨论】：