Použití základní grafiky a animace jádra v Xamarin.iOS

  • Článek

V tomto názorném postupu nakreslíme cestu pomocí základní grafiky v reakci na dotykové zadání. Pak přidáme CALayer obsahující obrázek, který budeme animovat podél cesty.

Následující snímek obrazovky ukazuje dokončenou aplikaci:

The completed application

Než začneme stahovat ukázku GraphicsDemo , která doprovází tuto příručku. Můžete ho stáhnout zde a nachází se v adresáři GraphicsWalkthrough Spustit projekt s názvem GraphicsDemo_starter poklikáním na něj a otevřete DemoView třídu.

Kreslení cesty

  1. Přidejte DemoView proměnnou CGPath do třídy a vytvořte instanci v konstruktoru. Deklarujeme také dvě CGPoint proměnné initialPoint a latestPoint, které použijeme k zachycení dotykového bodu, ze kterého vytvoříme cestu:

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

    public DemoView ()
    {
        BackgroundColor = UIColor.White;

        path = new CGPath ();
    }
}

  2. Přidejte následující direktivy using:

    using CoreGraphics;
using CoreAnimation;
using Foundation;

  3. Dále přepište TouchesBegan a TouchesMoved, přidejte následující implementace pro zachycení počátečního dotykového bodu a každého dalšího dotykového bodu v uvedeném pořadí:

    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 bude volána pokaždé, když se dotknete, aby Draw bylo možné volat při dalším průchodu smyčky spuštění.

  4. Do cesty v Draw metodě přidáme čáry a k kreslení použijeme červenou přerušovanou čáru. Implementujte Draw s následujícím kódem:

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

Pokud teď spustíme aplikaci, můžeme se dotknete kreslení na obrazovce, jak je znázorněno na následujícím snímku obrazovky:

Drawing on the screen

Animace podél cesty

Teď, když jsme implementovali kód, který uživatelům umožní nakreslit cestu, přidáme kód k animaci vrstvy podél nakreslené cesty.

  1. Nejprve přidejte proměnnou CALayer do třídy a vytvořte ji v konstruktoru:

    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. V dalším kroku přidáme vrstvu jako podvrstvku vrstvy zobrazení, když uživatel zvedne prst z obrazovky. Pak vytvoříme animaci klíčového rámce pomocí cesty a animaci vrstvy Position.

    Abychom toho dosáhli, musíme přepsat TouchesEnded a přidat následující kód:

    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. Spusťte aplikaci hned a po výkresu, přidá se vrstva s obrázkem a přesune se podél nakreslené cesty:

A layer with an image is added and travels along the drawn path

Shrnutí

V tomto článku jsme si prošli příklad, který spojuje koncepty grafiky a animace dohromady. Nejprve jsme ukázali, jak pomocí základní grafiky nakreslit cestu v UIView reakci na dotykové ovládání uživatele. Pak jsme ukázali, jak pomocí základní animace vytvořit cestu k obrázku po této cestě.