xamarin形成可缩放图像(跨平台)

cgvd09ve  于 2022-12-07  发布在  其他
关注(0)|答案(2)|浏览(946)

有没有一种方法可以使用pinch来放大共享的Xamarin Forms,我只找到了每个平台的一个实现。

wqsoz72f

wqsoz72f1#

你可以使用平移手势来实现它。这里有一个在PanContainer中 Package 图像的很好的例子-Adding a Pan Gesture Recognizer
平移手势用于检测拖动,并通过PanGestureRecognizer类实现。平移手势的常见场景是水平和垂直拖动图像,以便当图像显示在小于图像尺寸的视口中时,可以查看所有图像内容。这是通过在视口中移动图像来实现的。
简单示例:

<Image Source="MonoMonkey.jpg">
  <Image.GestureRecognizers>
    <PanGestureRecognizer PanUpdated="OnPanUpdated" />
  </Image.GestureRecognizers>
</Image>

平移容器示例XAML:

<AbsoluteLayout>
    <local:PanContainer>
        <Image Source="MonoMonkey.jpg" WidthRequest="1024" HeightRequest="768" />
    </local:PanContainer>
</AbsoluteLayout>

后面的代码:

public class PanContainer : ContentView
{
  double x, y;

  public PanContainer ()
  {
    // Set PanGestureRecognizer.TouchPoints to control the
    // number of touch points needed to pan
    var panGesture = new PanGestureRecognizer ();
    panGesture.PanUpdated += OnPanUpdated;
    GestureRecognizers.Add (panGesture);
  }

 void OnPanUpdated (object sender, PanUpdatedEventArgs e)
 {
   switch (e.StatusType) {
   case GestureStatus.Running:
     // Translate and ensure we don't pan beyond the wrapped user interface element bounds.
     Content.TranslationX =
      Math.Max (Math.Min (0, x + e.TotalX), -Math.Abs (Content.Width - App.ScreenWidth));
     Content.TranslationY =
      Math.Max (Math.Min (0, y + e.TotalY), -Math.Abs (Content.Height - App.ScreenHeight));
     break;

   case GestureStatus.Completed:
     // Store the translation applied during the pan
     x = Content.TranslationX;
     y = Content.TranslationY;
     break;
   }
 }
}
x9ybnkn6

x9ybnkn62#

您可以尝试使用我在.NET Maui上制作并验证的this modificationTBertuzzi/Xamarin.Forms.PinchZoomImage,以便:

  • 调整图像边界,使其在平移手势时不发生偏移。
  • 缩放后休眠0.2秒,以防止平移。
  • 不要放大超过4倍,从合适的命名空间导入后可以像这样作为容器使用:
<? xml version = "1.0" encoding = "utf-8" ?>
 < ContentPage xmlns = "http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns: x = "http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns: collects = "clr-namespace:Mab.Collects"
             x: Class = "N3ema.Secondpageimageshow" >
    < ContentPage.Content >
        < collects:Zoom >
            < collects:Zoom.Content >
                < StackLayout >
                    < Image Source = "shahid.jpeg"
                           HorizontalOptions = "Fill"
                           Aspect = "Fill"
                           VerticalOptions = "FillAndExpand" />
                </ StackLayout >
            </ collects:Zoom.Content >
        </ collects:Zoom >
    </ ContentPage.Content >
</ ContentPage >

相关问题