Verwenden von Kerngrafiken und Kernanimation in Xamarin.iOS

  • Artikel

Für diese exemplarische Vorgehensweise zeichnen wir einen Pfad mithilfe von Kerngrafiken als Reaktion auf Toucheingaben. Anschließend fügen wir ein CALayer hinzu, das ein Bild enthält, das entlang des Pfads animiert wird.

Der folgende Screenshot zeigt die fertige Anwendung:

Die abgeschlossene Anwendung

Bevor wir mit dem Herunterladen des GraphicsDemo-Beispiels beginnen, das in diesem Handbuch beschrieben wird. Es kann hier heruntergeladen werden und befindet sich im GraphicsWalkthrough-Verzeichnis Starten Sie das Projekt mit dem Namen GraphicsDemo_starter , indem Sie darauf doppelklicken, und öffnen Sie die DemoView -Klasse.

Zeichnen eines Pfads

  1. Fügen DemoView Sie in der -Klasse eine CGPath Variable hinzu, und instanziieren Sie sie im -Konstruktor. Deklarieren Sie außerdem zwei CGPoint Variablen , initialPoint und latestPoint, die wir verwenden, um den Touchpunkt zu erfassen, aus dem wir den Pfad erstellen:

    public class DemoView : UIView
{
    CGPath path;
    CGPoint initialPoint;
    CGPoint latestPoint;

    public DemoView ()
    {
        BackgroundColor = UIColor.White;

        path = new CGPath ();
    }
}

  2. Fügen Sie die folgenden using-Direktiven hinzu:

    using CoreGraphics;
using CoreAnimation;
using Foundation;

  3. Überschreiben TouchesBegan Sie als Nächstes und TouchesMoved, die folgenden Implementierungen, und fügen Sie die folgenden Implementierungen hinzu, um den anfänglichen Touchpunkt bzw. jeden nachfolgenden Touchpunkt zu erfassen:

    public override void TouchesBegan (NSSet touches, UIEvent evt){

    base.TouchesBegan (touches, evt);

    UITouch touch = touches.AnyObject as UITouch;

    if (touch != null) {
        initialPoint = touch.LocationInView (this);
    }
}

public override void TouchesMoved (NSSet touches, UIEvent evt){

    base.TouchesMoved (touches, evt);

    UITouch touch = touches.AnyObject as UITouch;

    if (touch != null) {
        latestPoint = touch.LocationInView (this);
        SetNeedsDisplay ();
    }
}

    SetNeedsDisplay wird bei jeder Berührungsbewegung aufgerufen, damit Draw beim nächsten Ausführungsschleifendurchlauf aufgerufen wird.

  4. Wir fügen dem Pfad in der Draw -Methode Linien hinzu und verwenden eine rote gestrichelte Linie zum Zeichnen. Implementieren Draw mit dem unten gezeigten Code:

    public override void Draw (CGRect rect){

    base.Draw (rect);

    if (!initialPoint.IsEmpty) {

        //get graphics context
        using(CGContext g = UIGraphics.GetCurrentContext ()){

            //set up drawing attributes
            g.SetLineWidth (2);
            UIColor.Red.SetStroke ();

            //add lines to the touch points
            if (path.IsEmpty) {
                path.AddLines (new CGPoint[]{initialPoint, latestPoint});
            } else {
                path.AddLineToPoint (latestPoint);
            }

            //use a dashed line
            g.SetLineDash (0, new nfloat[] { 5, 2 * (nfloat)Math.PI });

            //add geometry to graphics context and draw it
            g.AddPath (path);
            g.DrawPath (CGPathDrawingMode.Stroke);
        }
    }
}

Wenn wir die Anwendung jetzt ausführen, können wir touchieren, um auf dem Bildschirm zu zeichnen, wie im folgenden Screenshot gezeigt:

Zeichnen auf dem Bildschirm

Animieren entlang eines Pfads

Nachdem wir nun den Code implementiert haben, damit Benutzer den Pfad zeichnen können, fügen wir den Code hinzu, um eine Ebene entlang des gezeichneten Pfads zu animieren.

  1. Fügen Sie zunächst der -Klasse eine CALayer Variable hinzu, und erstellen Sie sie im -Konstruktor:

    public class DemoView : UIView
    {
        …

        CALayer layer;

        public DemoView (){
            …

            //create layer
            layer = new CALayer ();
            layer.Bounds = new CGRect (0, 0, 50, 50);
            layer.Position = new CGPoint (50, 50);
            layer.Contents = UIImage.FromFile ("monkey.png").CGImage;
            layer.ContentsGravity = CALayer.GravityResizeAspect;
            layer.BorderWidth = 1.5f;
            layer.CornerRadius = 5;
            layer.BorderColor = UIColor.Blue.CGColor;
            layer.BackgroundColor = UIColor.Purple.CGColor;
        }

  2. Als Nächstes fügen wir die Ebene als Unterschicht der Ansichtsebene hinzu, wenn der Benutzer den Finger vom Bildschirm hebt. Anschließend erstellen wir mithilfe des Pfads eine Keyframeanimation, die den -Wert der Ebene Positionanimiert.

    Um dies zu erreichen, müssen wir den TouchesEnded überschreiben und den folgenden Code hinzufügen:

    public override void TouchesEnded (NSSet touches, UIEvent evt)
    {
        base.TouchesEnded (touches, evt);

        //add layer with image and animate along path

        if (layer.SuperLayer == null)
            Layer.AddSublayer (layer);

        // create a keyframe animation for the position using the path
        layer.Position = latestPoint;
        CAKeyFrameAnimation animPosition = (CAKeyFrameAnimation)CAKeyFrameAnimation.FromKeyPath ("position");
        animPosition.Path = path;
        animPosition.Duration = 3;
        layer.AddAnimation (animPosition, "position");
    }

  3. Führen Sie die Anwendung jetzt aus, und nach dem Zeichnen wird eine Ebene mit einem Bild hinzugefügt und verläuft entlang des gezeichneten Pfads:

Eine Ebene mit einem Bild wird hinzugefügt und verläuft entlang des gezeichneten Pfads.

Zusammenfassung

In diesem Artikel haben wir ein Beispiel durchlaufen, in dem Grafik- und Animationskonzepte miteinander verknüpft wurden. Zunächst haben wir gezeigt, wie Sie mithilfe von Kerngrafiken einen Pfad in einem UIView als Reaktion auf die Benutzereingabe zeichnen. Anschließend haben wir gezeigt, wie Sie mithilfe der Kernanimation ein Bild entlang dieses Pfads verschieben.