Dibujar un Círculo simple en SkiaSharp
Descubra los aspectos básicos del dibujo de SkiaSharp, incluidos los lienzos y los objetos para pintar
En este artículo se presentan los conceptos de dibujo de gráficos en Xamarin.Forms mediante SkiaSharp, incluida la creación de un objeto SKCanvasView para hospedar los gráficos, el control del evento PaintSurface y el uso de un objeto SKPaint para especificar el color y otros atributos de dibujo.
El programa de ejemplo contiene todo el código de ejemplo de esta serie de artículos de SkiaSharp. La primera página tiene el título Círculo simple e invoca la clase de página SimpleCirclePage. Este código muestra cómo dibujar un círculo en el centro de la página con un radio de 100 píxeles. El contorno del círculo es rojo y el interior del círculo es azul.
La clase de página SimpleCircle deriva de ContentPage y contiene dos directivas using para los espacios de nombres SkiaSharp:
using SkiaSharp;
using SkiaSharp.Views.Forms;
El siguiente constructor de la clase crea un objeto SKCanvasView, adjunta un controlador para el evento PaintSurface y establece el objeto SKCanvasView como el contenido de la página:
public SimpleCirclePage()
{
Title = "Simple Circle";
SKCanvasView canvasView = new SKCanvasView();
canvasView.PaintSurface += OnCanvasViewPaintSurface;
Content = canvasView;
}
El SKCanvasView ocupa todo el área de contenido de la página. También puede combinar un SKCanvasView con otros Xamarin.FormsView derivados, como podrá ver en otros ejemplos.
El controlador de eventos PaintSurface es donde se dibuja. Se puede llamar a este método varias veces mientras se ejecuta el programa, por lo que debe mantener toda la información necesaria para volver a crear la pantalla de gráficos:
void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
...
}
El objeto SKPaintSurfaceEventArgs que acompaña al evento tiene dos propiedades:
Infode tipoSKImageInfoSurfacede tipoSKSurface
La estructura SKImageInfo contiene información sobre la superficie de dibujo, sobre todo su ancho y alto en píxeles. El objeto SKSurface representa la propia superficie de dibujo. En este programa, la superficie de dibujo es una pantalla de vídeo, pero en otros programas un objeto SKSurface también puede representar un mapa de bits en el que se usa SkiaSharp para dibujar.
La propiedad más importante de SKSurface es Canvas de tipo SKCanvas. Esta clase es un contexto de dibujo gráfico que se usa para realizar el dibujo real. El objeto SKCanvas encapsula un estado gráfico, que incluye transformaciones de gráficos y recortes.
Este es un inicio típico de un controlador de eventos PaintSurface:
void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
SKImageInfo info = args.Info;
SKSurface surface = args.Surface;
SKCanvas canvas = surface.Canvas;
canvas.Clear();
...
}
El método Clear borra el lienzo con un color transparente. Una sobrecarga le permite especificar un color de fondo para el lienzo.
El objetivo es dibujar un círculo rojo relleno de azul. Dado que esta imagen gráfica concreta contiene dos colores diferentes, el trabajo debe realizarse en dos pasos. El primer paso es dibujar el contorno del círculo. Para especificar el color y otra característica de la línea, cree e inicialice un objeto SKPaint:
void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
...
SKPaint paint = new SKPaint
{
Style = SKPaintStyle.Stroke,
Color = Colors.Red.ToSKColor(),
StrokeWidth = 25
};
...
}
La propiedadStyle indica que desea trazar una línea (en este caso, el contorno del círculo) en lugar de rellenar el interior. Los tres miembros de la enumeración SKPaintStyle son los siguientes:
El valor predeterminado es Fill. Use la tercera opción para trazar la línea y rellenar el interior con el mismo color.
Establezca la propiedad Color en un valor de tipo SKColor. Una manera de obtener un valor SKColor es convertir un valor Xamarin.FormsColor en un valor SKColor mediante el método de extensión ToSKColor. La clase Extensions del espacio de nombres SkiaSharp.Views.Forms incluye otros métodos que convierten entre valores Xamarin.Forms y valores SkiaSharp.
La propiedad StrokeWidth indica el grosor de la línea. Aquí está establecido en 25 píxeles.
Use ese objeto SKPaint para dibujar el círculo:
void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
...
canvas.DrawCircle(info.Width / 2, info.Height / 2, 100, paint);
...
}
Las coordenadas se especifican en relación con la esquina superior izquierda de la superficie de visualización. Las coordenadas X aumentan a la derecha y las coordenadas Y aumentan hacia abajo. Hablando de los gráficos, a menudo la notación matemática (x, y) se usa para denotar un punto. El punto (0, 0) es la esquina superior izquierda de la superficie de visualización y a menudo se denomina origen.
Los dos primeros argumentos de DrawCircle indican las coordenadas X e Y del centro del círculo. Se asignan a la mitad del ancho y alto de la superficie de visualización para colocar el centro del círculo en el centro de la superficie de visualización. El tercer argumento especifica el radio del círculo y el último argumento es el objeto SKPaint.
Para rellenar el interior del círculo puede modificar dos propiedades del objeto SKPaint y llamar DrawCircle de nuevo. Este código también muestra una manera alternativa de obtener un valor SKColor de uno de los muchos campos de la estructura SKColors:
void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
...
paint.Style = SKPaintStyle.Fill;
paint.Color = SKColors.Blue;
canvas.DrawCircle(args.Info.Width / 2, args.Info.Height / 2, 100, paint);
}
Esta vez, la DrawCircle llamada rellena el círculo mediante las nuevas propiedades del SKPaint objeto.
Este es el programa que se ejecuta en iOS y Android:
Al ejecutar el programa usted mismo, puede girar el teléfono o simulador lateralmente para ver cómo se vuelve a dibujar el gráfico. Cada vez que se debe volver a dibujar el gráfico, se vuelve a llamar al controlador de eventos PaintSurface.
También es posible colorear objetos gráficos con degradados o mosaicos de mapa de bits. Estas opciones se describen en la sección sobre sombreadores SkiaSharp.
Un objeto SKPaint es poco más que una colección de propiedades de dibujo de gráficos. Estos objetos son ligeros. Puede reutilizar objetos SKPaint tal como hace este programa o puede crear varios objetos SKPaint para varias combinaciones de propiedades de dibujo. Puede crear e inicializar estos objetos fuera del controlador de eventos PaintSurface y puede guardarlos como campos en la clase de página.
Nota:
La clase SKPaint define un IsAntialias para habilitar el suavizado de alias en la representación de los gráficos. El suavizado de alias generalmente da como resultado bordes visualmente más suaves, por lo que probablemente querrá establecer esta propiedad true en la mayoría de los objetos SKPaint. Para simplificar, esta propiedad no se establece en la mayoría de las páginas de ejemplo.
Aunque el ancho del contorno del círculo se especifica como 25 píxeles (o un cuarto del radio del círculo), parece ser más delgado y hay una buena razón para eso: la mitad del ancho de la línea está oculta por el círculo azul. Los argumentos del método DrawCircle definen las coordenadas geométricas abstractas de un círculo. El interior azul tiene el tamaño de esa dimensión al píxel más cercano, pero el contorno de ancho de 25 píxeles se extiende por el círculo geométrico, la mitad en el interior y la mitad en el exterior.
En el ejemplo siguiente del artículo Integración con Xamarin.Forms se muestra visualmente.