С помощью Core графика и анимация Core в Xamarin.iOSUsing Core Graphics and Core Animation in Xamarin.iOS

В этом пошаговом руководстве мы собираемся рисование контура с помощью двухмерной графики в ответ на сенсорный ввод.For this walkthrough we are going to draw a path using Core Graphics in response to touch input. Затем мы добавим CALayer содержащий изображение, которое мы будет анимации вдоль пути.Then, we will add a CALayer containing an image that we will animate along the path.

На следующем снимке экрана показан завершенное приложение:The following screenshot shows the completed application:

Перед началом загрузки GraphicsDemo , которая входит в этом руководстве.Before we begin download the GraphicsDemo sample that accompanies this guide. Его можно скачать здесь и находится внутри GraphicsWalkthrough каталог запуска в проект с именем GraphicsDemo_starter , дважды щелкнув его, и Откройте DemoView класса.It can be downloaded here and is located inside the GraphicsWalkthrough directory Launch the project named GraphicsDemo_starter by double-clicking on it, and open the DemoView class.

Рисование контураDrawing a Path

  1. В DemoView добавить CGPath переменной в класс и создать его экземпляр в конструктор.In DemoView add a CGPath variable to the class and instantiate it in the constructor. Также объявить два CGPoint переменные, initialPoint и latestPoint, что мы будем использовать для захвата точки касания, откуда же следует конструировать путь:Also declare two CGPoint variables , initialPoint and latestPoint, that we will use to capture the touch point from which we construct the path:

    public class DemoView : UIView
    {
        CGPath path;
        CGPoint initialPoint;
        CGPoint latestPoint;
    
        public DemoView ()
        {
            BackgroundColor = UIColor.White;
    
            path = new CGPath ();
        }
    }
    
  2. Добавьте следующие директивы using:Add the following using directives:

    using CoreGraphics;
    using CoreAnimation;
    using Foundation;
    
  3. Затем Переопределите TouchesBegan и TouchesMoved, и добавьте следующие реализации для записи начального сенсорной точки и каждой последующей сенсорной точки, соответственно:Next, override TouchesBegan and TouchesMoved, and add the following implementations to capture the initial touch point and each subsequent touch point respectively:

    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 будет вызываться каждый раз, перемещать штрихи выполнился Draw должен быть вызван в следующей проверки выполнения цикла.SetNeedsDisplay will be called each time touches move in order for Draw to be called on the next run loop pass.

  4. Мы добавим строки в путь в Draw метод и использование красной пунктирной линией для рисования с помощью.We’ll add lines to the path in the Draw method and use a red, dashed line to draw with. Реализуйте Draw с кодом, показанным ниже:Implement Draw with the code shown below:

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

Если запустить приложение сейчас, мы можете коснуться для рисования на экране, как показано на следующем снимке экрана:If we run the application now, we can touch to draw on the screen, as shown in the following screenshot:

Анимации вдоль путиAnimating Along a Path

Теперь, когда мы реализовали код, чтобы разрешить пользователям Нарисуйте контур, давайте добавим код для анимации слой нарисованной траектории.Now that we have implemented the code to allow users to draw the path, let’s add the code to animate a layer along the drawn path.

  1. Во-первых, добавьте CALayer переменных в класс и создать его в конструкторе:First, add a CALayer variable to the class and create it in the constructor:

    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. Далее мы добавим слой как подуровень слоя представления когда пользователь поднимает вверх пальцев на экране.Next, we’ll add the layer as a sublayer of the view’s layer when the user lifts up their finger from the screen. Затем мы создадим опорный кадр анимации, используя путь, анимация слоя Position.Then, we will create a keyframe animation using the path, animating the layer’s Position.

    Для этого нам нужно переопределить TouchesEnded и добавьте следующий код:To accomplish this we need to override the TouchesEnded and add the following code:

    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. Запустить приложение сейчас и после рисования, слой с изображением добавляется и перемещается вдоль вычерченного пути:Run the application now and after drawing, a layer with an image is added and travels along the drawn path:

СводкаSummary

В этой статье мы были рассмотрены пример, в котором объединенных концепции графики и анимации.In this article, we stepped through an example that tied graphics and animation concepts together. Во-первых, мы показали, как использовать Core Graphics для рисования контура UIView в ответ на сенсорного ввода пользователя.First, we showed how to use Core Graphics to draw a path in a UIView in response to user touch. Затем мы показали, как использовать базовой анимации, чтобы сделать образ перемещаться по этому пути.Then we showed how to use Core Animation to make an image travel along that path.