Created
October 15, 2019 17:14
-
-
Save felipebaltazar/9a5b36147fb3cecca79220e5f8c7f4aa to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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