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

Descargar ejemplo Descargar el ejemploDownload Sample Download the sample

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

SkiaSharp es un sistema de gráficos 2D para .NET y C# basado en el motor de gráficos Skia de código abierto que se usa en gran medida 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 las Xamarin.Forms aplicaciones para dibujar gráficos vectoriales 2D, mapas de bits y texto.You can use SkiaSharp in your Xamarin.Forms applications to draw 2D vector graphics, bitmaps, and text.

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

Seminario Web: SkiaSharp para Xamarin.FormsWebinar: SkiaSharp for Xamarin.Forms

SkiaSharp Windows°PESkiaSharp Preliminaries

SkiaSharp para Xamarin.Forms se empaqueta como un paquete NuGet.SkiaSharp for Xamarin.Forms is packaged as a NuGet package. Después de crear una Xamarin.Forms solución en Visual Studio o Visual Studio para Mac, puede usar el administrador de paquetes NuGet para buscar el paquete SkiaSharp. views. Forms 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 comprueba la sección referencias de cada proyecto después de agregar SkiaSharp, puede ver que se han agregado varias bibliotecas SkiaSharp 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 su Xamarin.Forms aplicación tiene como destino iOS, edite su archivo info. plist para cambiar el destino de implementación mínimo a iOS 8,0.If your Xamarin.Forms application targets iOS, edit its Info.plist file to change the minimum deployment target to iOS 8.0.

En cualquier página de C# que use SkiaSharp, querrá incluir una using Directiva para el SkiaSharp espacio de nombres, que engloba todas las clases, estructuras y enumeraciones SkiaSharp que usará en la programación de gráficos.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 querrá una using 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. Se trata de un espacio de nombres mucho más pequeño, con la clase más importante SKCanvasView .This is a much smaller namespace, with the most important class being SKCanvasView. Esta clase se deriva de la Xamarin.Forms View clase y hospeda la salida de los gráficos 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 una SKGLView clase que se deriva de View pero utiliza 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. Por motivos de simplicidad, esta guía se restringe a SKCanvasView , pero 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 de gráficos más sencillas que se pueden dibujar con SkiaSharp son círculos, óvalos y rectángulos.Some of the simplest graphics figures you can draw with SkiaSharp are circles, ovals, and rectangles. Al mostrar estas figuras, obtendrá información sobre las coordenadas, los tamaños y los colores de SkiaSharp.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 esas 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 y curvas conectadas.A graphics path is a series of connected straight lines and curves. Las rutas de acceso se pueden trazar, rellenar o ambos.Paths can be stroked, filled, or both. En este artículo se incluyen muchos aspectos del dibujo de líneas, incluidos los extremos del trazo y las combinaciones, y las líneas discontinuas y con puntos, pero se detienen pocas 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 de gráficos se traduzcan, escalen, giren o sesgadon uniformemente.Transforms allow graphics objects to be uniformly translated, scaled, rotated, or skewed. En este artículo también se muestra cómo puede usar una matriz de transformación estándar de 3 por 3 para crear transformaciones no afines y aplicar transformaciones a trazados.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 continúa con la adición de curvas a los objetos de trazado y la explotación de otras características de ruta de acceso eficaces.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 concisa, cómo usar los efectos de la ruta de acceso y cómo profundizar en la ruta de acceso interna.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. En esta serie de artículos se muestra cómo cargar, guardar, mostrar, crear, dibujar, animar y obtener acceso a los bits de los mapas de bits de SkiaSharp.This series of articles shows how to load, save, display, create, draw on, animate, and access the bits of SkiaSharp bitmaps.

Efectos SkiaSharpSkiaSharp Effects

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