Рисование пальцами в SkiaSharpFinger Painting in SkiaSharp

Загрузить образец загрузить примерDownload Sample Download the sample

Используйте пальцы для рисования на холсте.Use your fingers to paint on the canvas.

SKPath Постоянно обновляться и отображения объекта.An SKPath object can be continually updated and displayed. Эта функция позволяет путь используется для интерактивного рисунком, таких как в программе красочное.This feature allows a path to be used for interactive drawing, such as in a finger-painting program.

Поддержка сенсорного ввода в Xamarin.Forms не позволяет отслеживания отдельных пальцев на экране, чтобы эффект Xamarin.Forms touch отслеживания был разработан для обеспечения поддержки дополнительных сенсорного ввода.The touch support in Xamarin.Forms does not allow tracking individual fingers on the screen, so a Xamarin.Forms touch-tracking effect has been developed to provide additional touch support. В этой статье описан этот эффект вызов события из эффекты.This effect is described in the article Invoking Events from Effects. Пример программы демонстрации эффекта Touch отслеживания включает в себя две страницы, использующие SkiaSharp, включая красочное программу.The sample program Touch-Tracking Effect Demos includes two pages that use SkiaSharp, including a finger-painting program.

SkiaSharpFormsDemos решение включает в себя это событие отслеживания сенсорного ввода.The SkiaSharpFormsDemos solution includes this touch-tracking event. Включает в себя проект библиотеки .NET Standard TouchEffect класс, TouchActionType перечисления, TouchActionEventHandler делегата и TouchActionEventArgs класса.The .NET Standard library project includes the TouchEffect class, the TouchActionType enumeration, the TouchActionEventHandler delegate, and the TouchActionEventArgs class. Каждый из проектов платформы включает в себя TouchEffect класса для данной платформы; проект iOS также содержит TouchRecognizer класса.Each of the platform projects includes a TouchEffect class for that platform; the iOS project also contains a TouchRecognizer class.

Рисование пальцами странице в SkiaSharpFormsDemos представляет собой упрощенную реализацию Рисование пальцем.The Finger Paint page in SkiaSharpFormsDemos is a simplified implementation of finger painting. Не разрешить выбор цвет и ширина штриха, он никак не может очистить холст и Конечно не удается сохранить иллюстрации.It does not allow selecting color or stroke width, it has no way to clear the canvas, and of course you can't save your artwork.

FingerPaintPage.xaml файл помещает SKCanvasView в одной ячейке Grid и присоединяет TouchEffect , Grid:The FingerPaintPage.xaml file puts the SKCanvasView in a single-cell Grid and attaches the TouchEffect to that Grid:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:skia="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"
             xmlns:tt="clr-namespace:TouchTracking"
             x:Class="SkiaSharpFormsDemos.Paths.FingerPaintPage"
             Title="Finger Paint">

    <Grid BackgroundColor="White">
        <skia:SKCanvasView x:Name="canvasView"
                           PaintSurface="OnCanvasViewPaintSurface" />
        <Grid.Effects>
            <tt:TouchEffect Capture="True"
                            TouchAction="OnTouchEffectAction" />
        </Grid.Effects>
    </Grid>
</ContentPage>

Присоединение TouchEffect непосредственно к SKCanvasView не работает в группе всех платформ.Attaching the TouchEffect directly to the SKCanvasView does not work under all platforms.

FingerPaintPage.xaml.cs файл с выделенным кодом определяет две коллекции для хранения SKPath объектов, а также SKPaint объектов для подготовки к просмотру эти пути:The FingerPaintPage.xaml.cs code-behind file defines two collections for storing the SKPath objects, as well as an SKPaint object for rendering these paths:

public partial class FingerPaintPage : ContentPage
{
    Dictionary<long, SKPath> inProgressPaths = new Dictionary<long, SKPath>();
    List<SKPath> completedPaths = new List<SKPath>();

    SKPaint paint = new SKPaint
    {
        Style = SKPaintStyle.Stroke,
        Color = SKColors.Blue,
        StrokeWidth = 10,
        StrokeCap = SKStrokeCap.Round,
        StrokeJoin = SKStrokeJoin.Round
    };

    public FingerPaintPage()
    {
        InitializeComponent();
    }
    ...
}

Как и предполагает имя, inProgressPaths словарь хранит путей, которые в настоящее время рисуются с одним или несколькими пальцами.As the name suggests, the inProgressPaths dictionary stores the paths that are currently being drawn by one or more fingers. Ключ словаря — идентификатор сенсорного ввода, прилагаемый к события касания.The dictionary key is the touch ID that accompanies the touch events. completedPaths Поле — это коллекция путей, которые были завершается, когда палец, который рисования контура снято с экрана.The completedPaths field is a collection of paths that were finished when a finger that was drawing the path lifted from the screen.

TouchAction Обработчик управляет этих двух коллекций.The TouchAction handler manages these two collections. При первом касании пальцем экрана, новый SKPath добавляется inProgressPaths.When a finger first touches the screen, a new SKPath is added to inProgressPaths. При перемещении пальца, дополнительные точки добавляются к пути.As that finger moves, additional points are added to the path. При выпуске пальца передается путь completedPaths коллекции.When the finger is released, the path is transferred to the completedPaths collection. Можно рисовать с помощью нескольких пальцев одновременно.You can paint with multiple fingers simultaneously. После каждого изменения к одному из путей или коллекций SKCanvasView становится недействительным:After each change to one of the paths or collections, the SKCanvasView is invalidated:

public partial class FingerPaintPage : ContentPage
{
    ...
    void OnTouchEffectAction(object sender, TouchActionEventArgs args)
    {
        switch (args.Type)
        {
            case TouchActionType.Pressed:
                if (!inProgressPaths.ContainsKey(args.Id))
                {
                    SKPath path = new SKPath();
                    path.MoveTo(ConvertToPixel(args.Location));
                    inProgressPaths.Add(args.Id, path);
                    canvasView.InvalidateSurface();
                }
                break;

            case TouchActionType.Moved:
                if (inProgressPaths.ContainsKey(args.Id))
                {
                    SKPath path = inProgressPaths[args.Id];
                    path.LineTo(ConvertToPixel(args.Location));
                    canvasView.InvalidateSurface();
                }
                break;

            case TouchActionType.Released:
                if (inProgressPaths.ContainsKey(args.Id))
                {
                    completedPaths.Add(inProgressPaths[args.Id]);
                    inProgressPaths.Remove(args.Id);
                    canvasView.InvalidateSurface();
                }
                break;

            case TouchActionType.Cancelled:
                if (inProgressPaths.ContainsKey(args.Id))
                {
                    inProgressPaths.Remove(args.Id);
                    canvasView.InvalidateSurface();
                }
                break;
        }
    }
    ...
    SKPoint ConvertToPixel(Point pt)
    {
        return new SKPoint((float)(canvasView.CanvasSize.Width * pt.X / canvasView.Width),
                           (float)(canvasView.CanvasSize.Height * pt.Y / canvasView.Height));
    }
}

Точки, сопровождающие события отслеживания сенсорного ввода являются координаты Xamarin.Forms; они должны преобразовываться в SkiaSharp координаты, которые являются пиксели.The points accompanying the touch-tracking events are Xamarin.Forms coordinates; these must be converted to SkiaSharp coordinates, which are pixels. Это назначение ConvertToPixel метод.That's the purpose of the ConvertToPixel method.

PaintSurface Обработчик просто выводит обе коллекции путей.The PaintSurface handler then simply renders both collections of paths. Ранее завершенного пути отображаются под путей в ход выполнения:The earlier completed paths appear underneath the paths in progress:

public partial class FingerPaintPage : ContentPage
{
    ...
    void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
    {
        SKCanvas canvas = args.Surface.Canvas;
        canvas.Clear();

        foreach (SKPath path in completedPaths)
        {
            canvas.DrawPath(path, paint);
        }

        foreach (SKPath path in inProgressPaths.Values)
        {
            canvas.DrawPath(path, paint);
        }
    }
    ...
}

Ваш картин палец ограничиваются только свои таланты:Your finger paintings are only limited by your talent:

Теперь вы узнали, как для рисования линий и кривых, с помощью параметрические уравнения определения.You've now seen how to draw lines and to define curves using parametric equations. На одном из следующих разделов пути и кривые SkiaSharp рассматриваются различные типы кривых, SKPath поддерживает.A later section on SkiaSharp Curves and Paths covers the various types of curves that SKPath supports. Но полезные необходимым условием является подробное описание преобразует SkiaSharp.But a useful prerequisite is an exploration of SkiaSharp Transforms.