c# - Xamarin Forms 中的手势图像

Question

我知道 Xamarin.Forms 中有大约 2 个手势监听器(缩放和点击)。我想知道如何做泛图像的例子？我正在尝试实现一种我们注册手势然后根据您移动的位置移动图像位置的方法。

我正在使用图像渲染器。但是它确实有效，但似乎给了我一个有趣的模糊效果。似乎我无法从图像中更改 X 和 Y 坐标，而不是我们可以在 imagerenderer 上更改它

我希望人们可以帮助 Xamarin.Forms 中的 n00b 实现一个好的 panimagegesture。

PanImageGesture:

public class PanGestureImage : Image
{
    public PanGestureImage()
    {

    }

    public event EventHandler GestureEvent;

    public void OnGestureEvent(float x, float y)
    {

    }
}

原生 android pan 图像渲染器:

[assembly: ExportRenderer(typeof(PanGestureImage), typeof(GestureImageRenderer))]
namespace Test.Droid.Renderer
{
    public class GestureImageRenderer : ImageRenderer
    {
        private readonly PanGestureListener _listener;
        private readonly GestureDetector _detector;

        public GestureImageRenderer()
        {
            _listener = new PanGestureListener();
            _detector = new GestureDetector(_listener);
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Image> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement == null)
            {
                this.GenericMotion -= HandleGenericMotion;
                this.Touch -= HandleTouch;
                _listener.GestureEvent -= HandleGestureEvent;
            }

            if (e.OldElement == null)
            {
                this.GenericMotion += HandleGenericMotion;
                this.Touch += HandleTouch;
                _listener.GestureEvent += HandleGestureEvent;

            }
        }

        void HandleTouch(object sender, TouchEventArgs e)
        {
            _detector.OnTouchEvent(e.Event);
        }

        void HandleGenericMotion(object sender, GenericMotionEventArgs e)
        {
            _detector.OnTouchEvent(e.Event);
        }

        void HandleGestureEvent(object sender, EventArgs e)
        {
            PanGestureImage _gi = (PanGestureImage)this.Element;
            var simpleGesture = sender as PanGestureListener;
            _gi.OnGestureEvent(simpleGesture.DiffX, simpleGesture.DiffY);
            MoveImage(sender);
        }

        private void MoveImage(object sender)
        {
            var simpleGesture = sender as PanGestureListener;
       //     this.SetX(simpleGesture.DiffX);
       //     this.SetY(simpleGesture.DiffY);

        }
    }
}

PanGestureListener:

public class PanGestureListener : GestureDetector.SimpleOnGestureListener
{
    private static int SWIPE_THRESHOLD = 100;
    private static int SWIPE_VELOCITY_THRESHOLD = 100;

    public event EventHandler GestureEvent;

    public float DiffX { get; set; }
    public float DiffY { get; set; }

    /*
    public override bool OnFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY)
    {

        DiffY = e2.GetY() - e1.GetY();
        DiffX = e2.GetX() - e1.GetX();
        if (GestureEvent != null)
        {
            GestureEvent(this, null);
        }
        return base.OnFling(e1, e2, velocityX, velocityY);
    } */


    public override bool OnScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY)
    {

        DiffY = e2.GetY() - e1.GetY();
        DiffX = e2.GetX() - e1.GetX();
        if (GestureEvent != null)
        {
            GestureEvent(this, null);
        }
         return base.OnScroll(e1, e2, distanceX, distanceY);
    }
}

XAML 中的用法:

<StackLayout VerticalOptions="CenterAndExpand">
  <AbsoluteLayout>
    <renderer:PanGestureImage Source="container.png"
           AbsoluteLayout.LayoutBounds="0.5, 0.5, 1, 1"
           AbsoluteLayout.LayoutFlags="All">
    </renderer:PanGestureImage>
    <Image Source="crosshair.png"
           AbsoluteLayout.LayoutBounds="0.5, 0.5,0.1,0.1"
           AbsoluteLayout.LayoutFlags="All"/>
  </AbsoluteLayout>
</StackLayout>

Answer 1

您可以为此使用 FFImageLoading。如果你想测试它，只需克隆 repo 并构建示例应用程序。在示例中，它使用按钮(示例是使用没有 PinchGestureRecognizer 的旧 Forms 版本测试的)但它应该很容易迁移到 PinchGestureRecognizer。

基本上，您需要做的就是使用适当的参数 public CropTransformation(double zoomFactor, double xOffset, double yOffset, double cropWidthRatio, double cropHeightRatio) 为 CachedImage 实例设置 CropTransformation。您可以在使用 CachedImage GetImageAsJPG 或 GetImageAsPNG 方法转换后获取 jpg 或 png 文件示例代码(真的很简单):

CropTransformationPage.cs

CropTransformationViewModel.cs