Přidání rozpoznávání gest připnutím prstů

Gesto připnutí se používá k provádění interaktivního přiblížení a je implementováno s PinchGestureRecognizer třídy. Běžným scénářem gesta připnutí je interaktivní přiblížení obrázku na místě připnutí. Toho se dosahuje škálováním obsahu oblasti zobrazení a ukazuje se v tomto článku.

Pokud chcete, aby byl prvek uživatelského rozhraní zvětšitelný pomocí gesta připnutí, vytvořte PinchGestureRecognizer instanci, zpracujte PinchUpdated událost a přidejte do kolekce na prvek uživatelského rozhraní nový rozpoznávání GestureRecognizers gest. Následující příklad kódu ukazuje připojenou PinchGestureRecognizer k elementu Image :

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

Toho lze dosáhnout také v xaml, jak je znázorněno v následujícím příkladu kódu:

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

Kód obslužné OnPinchUpdated rutiny události se pak přidá do souboru kódu za kódem:

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

Vytvoření kontejneru PinchToZoom

Zpracování gest připnutí při provádění operace přiblížení vyžaduje k transformaci uživatelského rozhraní určitou matematiku. Tato část obsahuje zobecněnou pomocnou třídu pro provádění matematiky, kterou lze použít k interaktivnímu přiblížení libovolného prvku uživatelského rozhraní. Následující příklad kódu ukazuje PinchToZoomContainer třídu:

public class PinchToZoomContainer : ContentView
{
  ...

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

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

Tato třída může být zabalena kolem prvku uživatelského rozhraní, aby gesto připnutí přiblížit zabalený prvek uživatelského rozhraní. Následující příklad kódu XAML ukazuje zabalení elementu PinchToZoomContainer Image :

<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>

Následující příklad kódu ukazuje, jak PinchToZoomContainer zalamuje Image prvek na stránce jazyka 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 Když prvek obdrží gesto připnutí, zobrazený obrázek se přiblíží nebo oddálí. Přiblížení provádí PinchZoomContainer.OnPinchUpdated metoda, která je znázorněna v následujícím příkladu kódu:

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;
  }
}

Tato metoda aktualizuje úroveň přiblížení zabaleného prvku uživatelského rozhraní na základě gesta připnutí uživatele. Toho dosáhnete pomocí hodnot a ScaleScaleOrigin Status vlastností PinchGestureUpdatedEventArgs instance k výpočtu koeficientu, který se má použít při počátku gest připnutí. Zabalený prvek uživatele se pak přiblíží na původ gesta připnutí nastavením jeho TranslationX, TranslationYa Scale vlastnosti na počítané hodnoty.

Související odkazy

• Gestorecognizer
• PinchGestureRecognizer