Skip to content

Instantly share code, notes, and snippets.

@felipebaltazar
Created October 15, 2019 17:14
Show Gist options
  • Save felipebaltazar/9a5b36147fb3cecca79220e5f8c7f4aa to your computer and use it in GitHub Desktop.
Save felipebaltazar/9a5b36147fb3cecca79220e5f8c7f4aa to your computer and use it in GitHub Desktop.
private void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs e)
{
var info = e.Info;
var surface = e.Surface;
var canvas = surface.Canvas;
//Essa diferença é calculada para manter o desenho em proporção 1:1
//Ou seja, estou vendo quem é maior (largura ou altura) para definir um valor
//a ser ajustado na largura ou na altura.
var diferenceX = info.Width > info.Height ? (info.Width - info.Height) / 2 : 0;
var diferenceY = info.Height > info.Width ? (info.Height - info.Width) / 2 : 0;
//Aqui estou calculando a largura do traço que vamos usar para desenhar
//Neste caso eu crio ele proporcional a largura da view
var strokeWidth = (4 * (info.Width - diferenceX)) / 100;
//Esse retangulo é basicamente o enquadramento onde estará inserido
//aquele semi circulo do gráfico
var rect = new SKRect(
5 + strokeWidth + diferenceX,
5 + strokeWidth + diferenceY,
info.Width - (5 + strokeWidth + diferenceX),
info.Height - (5 + strokeWidth + diferenceY));
//Esse é necessario para futuros updates e animações
canvas.Clear();
// Aqui criamos o "pincel" para desenhar
//o circulo do fundo em cinza
var paint = new SKPaint
{
Style = SKPaintStyle.Stroke,
Color = Color.LightGray.ToSKColor(),
StrokeWidth = strokeWidth,
IsAntialias = true,
IsStroke = true
};
//E aqui finalmente desenhamos o nosso primeiro circulo
//Indicando qual o angulo de inicio (startAngle) e qual o angulo final (backgroundSweepAngle)
using (SKPath backgroundPath = new SKPath())
{
backgroundPath.AddArc(rect, startAngle, backgroundSweepAngle);
canvas.DrawPath(backgroundPath, paint);
}
//Aqui eu altero a espessura do traçado
//E informo uma nova cor para o pincel
paint.StrokeWidth = (8 * (info.Width - diferenceX)) / 100;
paint.Color = ForegroundColor.ToSKColor();
// E finalmente desenhamos o circulo de cima
// que indica o valor atual do gráfico
// No mesmo aspecto do anterior
// utilizando um angulo de inicio e outro de fim
using (SKPath dataPath = new SKPath())
{
dataPath.AddArc(rect, startAngle, dataSweepAngle);
canvas.DrawPath(dataPath, paint);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment