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é ovládání. Pak přidáme obsahující obrázek, který budeme v CALayer cestě animovat.

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

Dokončená aplikace

Než začneme, stáhněte si ukázku GraphicsDemo, která doprovází tohoto průvodce. Můžete ho stáhnout tady a najdete ho v adresáři GraphicsWalkthrough. Spusťte projekt GraphicsDemo_starter tak, že na něj poklikáte a otevřete třídu .

Kreslení cesty

  1. V DemoView souboru přidejte proměnnou do třídy a vytvořte instanci CGPath v konstruktoru . Deklarujte také dvě proměnné , a , které použijeme k zachycení dotykového CGPointinitialPointlatestPoint 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 a přidejte následující implementace pro zachycení počátečního dotykového bodu a každého TouchesBeganTouchesMoved, následné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 se bude volat při každém dotyku přesunutí, aby bylo možné volat při dalším Draw průchodu smyčkou spuštění.

  4. Přidáme do cesty v metodě čáry a ke kreslení použijeme červenou Draw přerušovanou čáru. Implementovat kódem zobrazený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 dotykem nakreslit na obrazovce, jak je znázorněno na následujícím snímku obrazovky:

Kreslení na obrazovce

Animace cesty

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

  1. Nejprve do CALayer třídy přidejte proměnnou 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. Dále přidáme vrstvu jako podvrstvu vrstvy zobrazení, když uživatel z obrazovky pozvedne prst. Pak pomocí cesty vytvoříme animaci klíčového snímku a animací objektu Position vrstvy .

    K tomu je potřeba přepsat a TouchesEnded 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 teď a po kreslení, přidá se vrstva s obrázkem, která se bude nakreslit po vykreslované cestě:

Přidá se vrstva s obrázkem a prochádí se po vykreslované cestě.

Souhrn

V tomto článku jsme prošli příklad, který spojuje koncepty grafiky a animace. Nejprve jsme ukázali, jak pomocí základní grafiky nakreslit cestu v reakci UIView na dotek uživatele. Pak jsme ukázali, jak pomocí základní animace udělat cestu obrázku.