Udostępnij za pośrednictwem

Dodawanie rozpoznawania gestów szczypta

  • Artykuł

Gest szczypty służy do wykonywania interaktywnego powiększania i jest implementowany za pomocą klasy PinchGestureRecognizer. Typowym scenariuszem gestu szczypania jest wykonywanie interaktywnego powiększania obrazu w miejscu uszczypnięcia. Jest to realizowane przez skalowanie zawartości widoku i pokazano w tym artykule.

Aby element interfejsu użytkownika był powiększany za pomocą gestu szczypania, utwórz PinchGestureRecognizer wystąpienie, obsłuż PinchUpdated zdarzenie i dodaj nowy moduł rozpoznawania gestów do GestureRecognizers kolekcji w elemecie interfejsu użytkownika. Poniższy przykład kodu przedstawia PinchGestureRecognizer element dołączony do Image elementu:

var pinchGesture = new PinchGestureRecognizer();
pinchGesture.PinchUpdated += (s, e) => {
  // Handle the pinch
};
image.GestureRecognizers.Add(pinchGesture);

Można to również osiągnąć w języku XAML, jak pokazano w poniższym przykładzie kodu:

<Image Source="waterfront.jpg">
  <Image.GestureRecognizers>
    <PinchGestureRecognizer PinchUpdated="OnPinchUpdated" />
  </Image.GestureRecognizers>
</Image>

Kod programu OnPinchUpdated obsługi zdarzeń jest następnie dodawany do pliku za pomocą kodu:

void OnPinchUpdated (object sender, PinchGestureUpdatedEventArgs e)
{
  // Handle the pinch
}

Tworzenie kontenera PinchToZoom

Obsługa gestu szczypania w celu wykonania operacji powiększenia wymaga pewnych obliczeń matematycznych w celu przekształcenia interfejsu użytkownika. Ta sekcja zawiera uogólnioną klasę pomocnika do wykonywania obliczeń matematycznych, która może służyć do interaktywnego powiększania dowolnego elementu interfejsu użytkownika. Poniższy przykład kodu przedstawia klasę PinchToZoomContainer :

public class PinchToZoomContainer : ContentView
{
  ...

  public PinchToZoomContainer ()
  {
    var pinchGesture = new PinchGestureRecognizer ();
    pinchGesture.PinchUpdated += OnPinchUpdated;
    GestureRecognizers.Add (pinchGesture);
  }

  void OnPinchUpdated (object sender, PinchGestureUpdatedEventArgs e)
  {
    ...
  }
}

Tę klasę można opakować wokół elementu interfejsu użytkownika, aby gest szczypta powiększał opakowany element interfejsu użytkownika. Poniższy przykład kodu XAML przedstawia PinchToZoomContainer zawijanie Image elementu:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:PinchGesture;assembly=PinchGesture"
             x:Class="PinchGesture.HomePage">
    <ContentPage.Content>
        <Grid Padding="20">
            <local:PinchToZoomContainer>
                <local:PinchToZoomContainer.Content>
                    <Image Source="waterfront.jpg" />
                </local:PinchToZoomContainer.Content>
            </local:PinchToZoomContainer>
        </Grid>
    </ContentPage.Content>
</ContentPage>

Poniższy przykład kodu pokazuje, jak PinchToZoomContainer opakowuje Image element na stronie języka C#:

public class HomePageCS : ContentPage
{
  public HomePageCS ()
  {
    Content = new Grid {
      Padding = new Thickness (20),
      Children = {
        new PinchToZoomContainer {
          Content = new Image { Source = ImageSource.FromFile ("waterfront.jpg") }
        }
      }
    };
  }
}

Image Gdy element otrzyma gest szczypta, wyświetlany obraz zostanie powiększony lub powiększony. Powiększenie jest wykonywane przez metodęPinchZoomContainer.OnPinchUpdated, która jest pokazana w poniższym przykładzie kodu:

void OnPinchUpdated (object sender, PinchGestureUpdatedEventArgs e)
{
  if (e.Status == GestureStatus.Started) {
    // Store the current scale factor applied to the wrapped user interface element,
    // and zero the components for the center point of the translate transform.
    startScale = Content.Scale;
    Content.AnchorX = 0;
    Content.AnchorY = 0;
  }
  if (e.Status == GestureStatus.Running) {
    // Calculate the scale factor to be applied.
    currentScale += (e.Scale - 1) * startScale;
    currentScale = Math.Max (1, currentScale);

    // The ScaleOrigin is in relative coordinates to the wrapped user interface element,
    // so get the X pixel coordinate.
    double renderedX = Content.X + xOffset;
    double deltaX = renderedX / Width;
    double deltaWidth = Width / (Content.Width * startScale);
    double originX = (e.ScaleOrigin.X - deltaX) * deltaWidth;

    // The ScaleOrigin is in relative coordinates to the wrapped user interface element,
    // so get the Y pixel coordinate.
    double renderedY = Content.Y + yOffset;
    double deltaY = renderedY / Height;
    double deltaHeight = Height / (Content.Height * startScale);
    double originY = (e.ScaleOrigin.Y - deltaY) * deltaHeight;

    // Calculate the transformed element pixel coordinates.
    double targetX = xOffset - (originX * Content.Width) * (currentScale - startScale);
    double targetY = yOffset - (originY * Content.Height) * (currentScale - startScale);

    // Apply translation based on the change in origin.
    Content.TranslationX = targetX.Clamp (-Content.Width * (currentScale - 1), 0);
    Content.TranslationY = targetY.Clamp (-Content.Height * (currentScale - 1), 0);

    // Apply scale factor.
    Content.Scale = currentScale;
  }
  if (e.Status == GestureStatus.Completed) {
    // Store the translation delta's of the wrapped user interface element.
    xOffset = Content.TranslationX;
    yOffset = Content.TranslationY;
  }
}

Ta metoda aktualizuje poziom powiększenia opakowanego elementu interfejsu użytkownika na podstawie gestu uszczypnięcia użytkownika. Jest to osiągane przy użyciu wartości Scalei ScaleOrigin Status właściwości PinchGestureUpdatedEventArgs wystąpienia w celu obliczenia współczynnika skalowania, który ma zostać zastosowany na początku gestu uszczypnięcia. Opakowany element użytkownika jest następnie powiększany na początku gestu szczypania, ustawiając jego TranslationXwłaściwości , TranslationYi Scale na wartości obliczeniowe.