Reconocer un gesto de reducir

Un reconocedor de gestos de reducir de.NET Multi-platform App UI (.NET MAUI) sirve para realizar zoom interactivo. Un escenario común para el gesto de reducir es realizar un zoom interactivo de una imagen en la ubicación donde se realice el gesto. Esto se logra al escalar el contenido de la ventanilla.

En .NET MAUI, la clase PinchGestureRecognizer proporciona el reconocimiento de gestos de reducir, que define un evento PinchUpdated que se genera cuando cambia el gesto de reducir detectado. El objeto PinchGestureUpdatedEventArgs que acompaña al evento PinchUpdated define las siguientes propiedades:

• Scale, de tipo double, que indica el tamaño relativo del gesto de reducir del usuario desde que se recibió la última actualización.
• ScaleOrigin, de tipo Point, que indica el origen actualizado del gesto de reducir.
• Status, de tipo GestureStatus, que indica si el evento se ha generado para un gesto recién iniciado, un gesto en ejecución, un gesto completado o un gesto cancelado.

Crear un PinchGestureRecognizer

Para hacer que View reconozca un gesto de reducir, crea un objeto PinchGestureRecognizer, controla el evento PinchUpdated y agrega el nuevo reconocedor de gestos a la colección GestureRecognizers de la vista. En el ejemplo de código siguiente se muestra un elemento PinchGestureRecognizer adjunto a Image:

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

El código del controlador de eventos OnPinchUpdated debería agregarse al archivo de código subyacente:

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

El código de C# equivalente es el siguiente:

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

Crear un contenedor de reducir

La clase PinchToZoomContainer, que se muestra en el ejemplo siguiente, es una clase auxiliar generalizada que se puede usar para ampliar interactivamente una clase View:

public class PinchToZoomContainer : ContentView
{
    double currentScale = 1;
    double startScale = 1;
    double xOffset = 0;
    double yOffset = 0;

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

    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 = Math.Clamp(targetX, -Content.Width * (currentScale - 1), 0);
            Content.TranslationY = Math.Clamp(targetY, -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;
        }
    }
}

En este ejemplo, el método OnPinchUpdated actualiza el nivel de zoom de la vista encapsulada basándose en el gesto de reducir del usuario. Para lograrlo, se usan los valores de las propiedades Scale, ScaleOrigin y Status del objeto PinchGestureUpdatedEventArgs para calcular el factor de escala que se aplicará en el origen del gesto de reducir. La vista encapsulada se amplía o reduce en el origen del gesto de reducir al establecer las propiedades TranslationX, TranslationY y Scale en los valores calculados.

La clase PinchToZoomContainer se puede encapsular alrededor de View de modo que un gesto de reducir reconocido acerque la vista ajustada. En el siguiente ejemplo de XAML, se muestra cómo encapsular PinchToZoomContainer en un elemento Image:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:PinchGesture;assembly=PinchGesture"
             x:Class="PinchGesture.HomePage">
    <Grid>
        <local:PinchToZoomContainer>
            <Image Source="waterfront.jpg" />
        </local:PinchToZoomContainer>
    </Grid>
</ContentPage>

En este ejemplo, cuando Image recibe un gesto de reducir, la imagen mostrada se ampliará o reducirá.