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

V tomto názorném postupu nakreslíme cestu pomocí základní grafiky v reakci na dotykový vstup. Pak přidáme CALayer obrázek 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 ji stáhnout sem 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. Do DemoView třídy přidejte proměnnou CGPath a vytvořte ji v konstruktoru. Deklarujeme také dvě CGPoint proměnné initialPoint a latestPoint, které použijeme k zachycení dotykového bodu, ze kterého vytváří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 řádky a k kreslení použijeme červenou přerušovanou čáru. Implementovat Draw s kódem uvedeným níže:

    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ď aplikaci spustíme, můžeme se dotkneme 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 do třídy proměnnou CALayer 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 nyní a po výkresu, přidá se vrstva s obrázkem a potáhne podél nakreslené cesty:

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

Souhrn

V tomto článku jsme prošli příkladem, který spojuje koncepty grafiky a animace. 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 udělat cestu obrázkem po této cestě.