Gráficos de SkiaSharp en Xamarin.FormsSkiaSharp Graphics in Xamarin.Forms

Descargar ejemplo descargar el ejemploDownload Sample Download the sample

Uso SkiaSharp para gráficos 2D en las aplicaciones de Xamarin.FormsUse SkiaSharp for 2D graphics in your Xamarin.Forms applications

SkiaSharp es un sistema de gráficos 2D para .NET y C# funciona con el motor de gráficos de Skia de código abierto que se usa habitualmente en productos de Google.SkiaSharp is a 2D graphics system for .NET and C# powered by the open-source Skia graphics engine that is used extensively in Google products. Puede usar SkiaSharp en sus aplicaciones de Xamarin.Forms para dibujar texto, mapas de bits y gráficos vectoriales en 2D.You can use SkiaSharp in your Xamarin.Forms applications to draw 2D vector graphics, bitmaps, and text. Consulte la plano 2D guía para obtener información general sobre la biblioteca de SkiaSharp y algunos otros tutoriales.See the 2D Drawing guide for more general information about the SkiaSharp library and some other tutorials.

En esta guía se da por supuesto que está familiarizado con la programación de Xamarin.Forms.This guide assumes that you are familiar with Xamarin.Forms programming.

Webinar: SkiaSharp para Xamarin.FormsWebinar: SkiaSharp for Xamarin.Forms

Pasos preliminares de SkiaSharpSkiaSharp Preliminaries

SkiaSharp para Xamarin.Forms está empaquetado como un paquete de NuGet.SkiaSharp for Xamarin.Forms is packaged as a NuGet package. Después de crear una solución de Xamarin.Forms en Visual Studio o Visual Studio para Mac, puede usar el Administrador de paquetes de NuGet para buscar el SkiaSharp.Views.Forms empaquetar y agregarlo a la solución.After you've created a Xamarin.Forms solution in Visual Studio or Visual Studio for Mac, you can use the NuGet package manager to search for the SkiaSharp.Views.Forms package and add it to your solution. Si activa la referencias sección de cada proyecto después de agregar SkiaSharp, puede ver que varios SkiaSharp bibliotecas se han agregado a cada uno de los proyectos de la solución.If you check the References section of each project after adding SkiaSharp, you can see that various SkiaSharp libraries have been added to each of the projects in the solution.

Si la aplicación de Xamarin.Forms tiene como destino iOS, use la página de propiedades de proyecto para cambiar el destino de implementación mínimo IOS 8.0.If your Xamarin.Forms application targets iOS, use the project properties page to change the minimum deployment target to iOS 8.0.

En cualquier página de C# que utiliza SkiaSharp desea incluir un using la directiva para el SkiaSharp espacio de nombres, que abarca todas las clases de SkiaSharp, estructuras y enumeraciones que va a usar en los gráficos la programación.In any C# page that uses SkiaSharp you'll want to include a using directive for the SkiaSharp namespace, which encompasses all the SkiaSharp classes, structures, and enumerations that you'll use in your graphics programming. También conviene un using la directiva para el SkiaSharp.Views.Forms espacio de nombres para las clases específicas de Xamarin.Forms.You'll also want a using directive for the SkiaSharp.Views.Forms namespace for the classes specific to Xamarin.Forms. Esto es una cantidad menor espacio de nombres, con la clase más importante que es SKCanvasView .This is a much smaller namespace, with the most important class being SKCanvasView. Esta clase se deriva de Xamarin.Forms View y hospede su salida gráfica de SkiaSharp.This class derives from the Xamarin.Forms View class and hosts your SkiaSharp graphics output.

Importante

El SkiaSharp.Views.Forms espacio de nombres también contiene un SKGLView clase que derive de View pero usa OpenGL para representar gráficos.The SkiaSharp.Views.Forms namespace also contains an SKGLView class that derives from View but uses OpenGL for rendering graphics. Para fines de simplicidad, esta guía restringe a sí mismo a SKCanvasView, pero al usar SKGLView en su lugar, es bastante similar.For purposes of simplicity, this guide restricts itself to SKCanvasView, but using SKGLView instead is quite similar.

Conceptos básicos de dibujo de SkiaSharpSkiaSharp Drawing Basics

Algunas de las cifras más sencillas de gráficos que puede dibujar con SkiaSharp son círculos, elipses y rectángulos.Some of the simplest graphics figures you can draw with SkiaSharp are circles, ovals, and rectangles. Mostrar estas cifras, aprenderá acerca de las coordenadas de SkiaSharp, tamaños y colores.In displaying these figures, you will learn about SkiaSharp coordinates, sizes, and colors. La presentación de texto y mapas de bits es más compleja, pero estos artículos también presentan estas técnicas.The display of text and bitmaps is more complex, but these articles also introduce those techniques.

Trazados y líneas de SkiaSharpSkiaSharp Lines and Paths

Una ruta de acceso de gráficos es una serie de líneas rectas conectadas y curvas.A graphics path is a series of connected straight lines and curves. Se trazan las rutas de acceso, rellenado, o ambos.Paths can be stroked, filled, or both. En este artículo abarca muchos aspectos del dibujo de líneas, incluidos los extremos de trazo y uniones y guiones y las líneas de puntos, pero no permite las geometrías de curva.This article encompasses many aspects of line drawing, including stroke ends and joins, and dashed and dotted lines, but stops short of curve geometries.

Transformaciones de SkiaSharpSkiaSharp Transforms

Las transformaciones permiten que los objetos gráficos uniformemente traducido, escalar, girar, o sesgar.Transforms allow graphics objects to be uniformly translated, scaled, rotated, or skewed. En este artículo también muestra cómo puede utilizar una matriz de transformación de 3 por 3 estándar para crear transformaciones no afines y aplicar transformaciones a rutas de acceso.This article also shows how you can use a standard 3-by-3 transform matrix for creating non-affine transforms and applying transforms to paths.

Trazados y curvas de SkiaSharpSkiaSharp Curves and Paths

La exploración de las rutas de acceso se continúa con la adición de curvas para los objetos de una ruta de acceso y aprovechando otras características eficaces de la ruta de acceso.The exploration of paths continues with adding curves to a path objects, and exploiting other powerful path features. Verá cómo puede especificar una ruta de acceso completa en una cadena de texto conciso, cómo usar los efectos de la ruta de acceso y cómo profundizar en los aspectos internos de ruta de acceso.You'll see how you can specify an entire path in a concise text string, how to use path effects, and how to dig into path internals.

Mapas de bits de SkiaSharpSkiaSharp Bitmaps

Los mapas de bits son matrices rectangulares de bits que corresponden a los píxeles de un dispositivo de pantalla.Bitmaps are rectangular arrays of bits corresponding to the pixels of a display device. Esta serie de artículos muestra cómo cargar, guardar, mostrar, crear, dibuje en, animar y tener acceso a los bits de SkiaSharp mapas de bits.This series of articles shows how to load, save, display, create, draw on, animate, and access the bits of SkiaSharp bitmaps.

Efectos de SkiaSharpSkiaSharp Effects

Los efectos son propiedades que cambian la visualización de gráficos, incluidos los degradados lineales y circulares normal, disposición en mosaico de mapa de bits, blend modos de desenfoque y otros usuarios.Effects are properties that alter the normal display of graphics, including linear and circular gradients, bitmap tiling, blend modes, blur, and others.