Xamarin.Forms 中的 SkiaSharp Arcs,区分 Arcs 的颜色
SkiaSharp Arcs in Xamarin.Forms , differentiate Colors for Arcs
我是 Xamarin.Forms 的 SkiaSharp 新手,
我正在尝试创建应该最终形成饼图的弧线。
目前无法为我的可观察集合中的对象获取不同的颜色。
输出以所有弧中的最后一个对象(即:tiger = SKColors.Blue)颜色属性结束。
我真的需要类似于图 1 的输出,其中以图 2 结尾。
任何相关的信息都会对我很有帮助。
谢谢
public partial class MyCustomCanvasView : ContentPage
{
public MyCustomCanvasView()
{
InitializeComponent();
}
public SKPaint _arcPaint;
public float _temp;
public float _total;
public float _percentage;
public float _arcAnglePoint;
public SKColor _Color;
private ObservableCollection<Profile> _profileDetails;
public ObservableCollection<Profile> ProfileDetails
{
get { return _profileDetails; }
set
{
_profileDetails = value;
OnPropertyChanged(nameof(ProfileDetails));
}
}
private float _sweepAngle=0;
public float SweepAngle
{
get { return _sweepAngle; }
set
{
_sweepAngle = value;
OnPropertyChanged(nameof(SweepAngle));
}
}
private float _startAngle = 0;
public float StartAngle
{
get { return _startAngle; }
set
{
_startAngle = value;
OnPropertyChanged(nameof(SweepAngle));
}
}
void OnCanvasViewPaintSurface(System.Object sender, SkiaSharp.Views.Forms.SKPaintSurfaceEventArgs args)
{
SKImageInfo info = args.Info;
SKSurface surface = args.Surface;
SKCanvas canvas = surface.Canvas;
canvas.Clear();
SKPaint FilledCircle = new SKPaint
{
Style = SKPaintStyle.Fill,
Color = Color.LightGray.ToSKColor(),
};
SKPaint arcPaint = new SKPaint
{
Style = SKPaintStyle.Stroke,
StrokeWidth = 200,
Color = SKColors.Green //_Color
};
_arcPaint = arcPaint;
SKPoint center = new SKPoint(info.Width / 2, info.Height / 2);
SKRect _rect = new SKRect(center.X - 150, center.Y - 150, center.X + 150, center.Y + 150);
using (SKPath path = new SKPath())
using (SKPaint fillPaint = new SKPaint())
using (SKPaint outlinePaint = new SKPaint())
{
ProfileDetails = new ObservableCollection<Profile>()
{
new Profile{Id = 0,Name = "Dog", sKColors = SKColors.Red , Values = 541 },
new Profile{Id = 1,Name = "Cat",sKColors = SKColors.Pink ,Values = 2587 },
new Profile{Id = 2,Name = "Horse",sKColors = SKColors.Green, Values = 365 },
new Profile{Id = 3,Name = "Tiger",sKColors = SKColors.Blue, Values = 257 }
};
foreach (var item in ProfileDetails)
{
_total = _total + item.Values;
}
foreach (var item in ProfileDetails)
{
PercentageCalculator(item.Values);
ArcPercentCalculator(_percentage);
SweepAngle = (float)_arcAnglePoint;
SweepAngle = (float)Math.Round(SweepAngle, 2);
if (item.Id == 0)
{
StartAngle = (float)0;
_temp = SweepAngle;
}
else
{
StartAngle = (float)_temp - 1;
var x = SweepAngle;
_temp = _temp + x;
}
path.AddArc(_rect, StartAngle, SweepAngle);
canvas.DrawPath(path, _arcPaint);
}
}
canvas.DrawCircle(center, 80, FilledCircle);
}
private void ArcPercentCalculator(float _percentage)
{
var _sweepAngle = (_percentage / 100) * 360;
_arcAnglePoint = _sweepAngle;
_arcAnglePoint = _arcAnglePoint * -1;
}
private void PercentageCalculator(float values)
{
var percent = (values / _total) * 100;
_percentage = percent;
}
}
public class Profile
{
public int Id { get; set; }
public string Name { get; set; }
public float Values { get; set; }
public SKColor sKColors { get; set; }
}
我将我的可观察集合移出了 foreach 循环,并将 SKPaint 及其对象移到了 foreach 循环内,这样它每次都会创建对象及其属性来创建新的弧线。我正在尝试获取它的大纲和命名标签,很快就会更新代码
public partial class MyCustomCanvasView : ContentPage
{
public MyCustomCanvasView()
{
InitializeComponent();
}
public SKPaint _arcPaint;
public float _temp;
public float _total;
public float _percentage;
public float _arcAnglePoint;
public SKColor _Color;
private ObservableCollection<Profile> _profileDetails;
public ObservableCollection<Profile> ProfileDetails
{
get { return _profileDetails; }
set
{
_profileDetails = value;
OnPropertyChanged(nameof(ProfileDetails));
}
}
private float _sweepAngle = 0;
public float SweepAngle
{
get { return _sweepAngle; }
set
{
_sweepAngle = value;
OnPropertyChanged(nameof(SweepAngle));
}
}
private float _startAngle = 0;
public float StartAngle
{
get { return _startAngle; }
set
{
_startAngle = value;
OnPropertyChanged(nameof(SweepAngle));
}
}
void OnCanvasViewPaintSurface(System.Object sender, SkiaSharp.Views.Forms.SKPaintSurfaceEventArgs args)
{
SKImageInfo info = args.Info;
SKSurface surface = args.Surface;
SKCanvas canvas = surface.Canvas;
canvas.Clear();
SKPaint FilledCircle = new SKPaint
{
Style = SKPaintStyle.Fill,
Color = Color.LightGray.ToSKColor(),
};
SKPaint arcPaint = new SKPaint
{
Style = SKPaintStyle.Stroke,
StrokeWidth = 200,
Color = SKColors.Green //_Color
};
_arcPaint = arcPaint;
SKPoint center = new SKPoint(info.Width / 2, info.Height / 2);
SKRect _rect = new SKRect(center.X - 150, center.Y - 150, center.X + 150, center.Y + 150);
ProfileDetails = new ObservableCollection<Profile>()
{
new Profile{Id = 0,Name = "Dog", sKColors = SKColors.Red , Values = 541 },
new Profile{Id = 1,Name = "Cat",sKColors = SKColors.Pink ,Values = 2587 },
new Profile{Id = 2,Name = "Horse",sKColors = SKColors.Green, Values = 365 },
new Profile{Id = 3,Name = "Tiger",sKColors = SKColors.Blue, Values = 257 }
};
foreach (var item in ProfileDetails)
{
_total = _total + item.Values;
}
foreach (var item in ProfileDetails)
{
PercentageCalculator(item.Values);
ArcPercentCalculator(_percentage);
SweepAngle = (float)_arcAnglePoint;
SweepAngle = (float)Math.Round(SweepAngle, 2);
if (item.Id == 0)
{
StartAngle = (float)0;
_temp = SweepAngle;
}
else
{
StartAngle = (float)_temp - 1;
var x = SweepAngle;
_temp = _temp + x;
}
using (SKPath path = new SKPath())
using (SKPaint fillPaint = new SKPaint())
using (SKPaint outlinePaint = new SKPaint())
{
fillPaint.Style = SKPaintStyle.Stroke;
fillPaint.StrokeWidth = 150;
fillPaint.Color = item.sKColors; //_Color
path.AddArc(_rect, StartAngle, SweepAngle);
canvas.DrawPath(path, fillPaint);
}
}
// canvas.DrawCircle(center, 80, FilledCircle);
}
private void ArcPercentCalculator(float _percentage)
{
var _sweepAngle = (_percentage / 100) * 360;
_arcAnglePoint = _sweepAngle;
_arcAnglePoint = _arcAnglePoint * -1;
}
private void PercentageCalculator(float values)
{
var percent = (values / _total) * 100;
_percentage = percent;
}
}
public class Profile
{
public int Id { get; set; }
public string Name { get; set; }
public float Values { get; set; }
public SKColor sKColors { get; set; }
}
我是 Xamarin.Forms 的 SkiaSharp 新手, 我正在尝试创建应该最终形成饼图的弧线。 目前无法为我的可观察集合中的对象获取不同的颜色。 输出以所有弧中的最后一个对象(即:tiger = SKColors.Blue)颜色属性结束。
我真的需要类似于图 1 的输出,其中以图 2 结尾。
任何相关的信息都会对我很有帮助。 谢谢
public partial class MyCustomCanvasView : ContentPage
{
public MyCustomCanvasView()
{
InitializeComponent();
}
public SKPaint _arcPaint;
public float _temp;
public float _total;
public float _percentage;
public float _arcAnglePoint;
public SKColor _Color;
private ObservableCollection<Profile> _profileDetails;
public ObservableCollection<Profile> ProfileDetails
{
get { return _profileDetails; }
set
{
_profileDetails = value;
OnPropertyChanged(nameof(ProfileDetails));
}
}
private float _sweepAngle=0;
public float SweepAngle
{
get { return _sweepAngle; }
set
{
_sweepAngle = value;
OnPropertyChanged(nameof(SweepAngle));
}
}
private float _startAngle = 0;
public float StartAngle
{
get { return _startAngle; }
set
{
_startAngle = value;
OnPropertyChanged(nameof(SweepAngle));
}
}
void OnCanvasViewPaintSurface(System.Object sender, SkiaSharp.Views.Forms.SKPaintSurfaceEventArgs args)
{
SKImageInfo info = args.Info;
SKSurface surface = args.Surface;
SKCanvas canvas = surface.Canvas;
canvas.Clear();
SKPaint FilledCircle = new SKPaint
{
Style = SKPaintStyle.Fill,
Color = Color.LightGray.ToSKColor(),
};
SKPaint arcPaint = new SKPaint
{
Style = SKPaintStyle.Stroke,
StrokeWidth = 200,
Color = SKColors.Green //_Color
};
_arcPaint = arcPaint;
SKPoint center = new SKPoint(info.Width / 2, info.Height / 2);
SKRect _rect = new SKRect(center.X - 150, center.Y - 150, center.X + 150, center.Y + 150);
using (SKPath path = new SKPath())
using (SKPaint fillPaint = new SKPaint())
using (SKPaint outlinePaint = new SKPaint())
{
ProfileDetails = new ObservableCollection<Profile>()
{
new Profile{Id = 0,Name = "Dog", sKColors = SKColors.Red , Values = 541 },
new Profile{Id = 1,Name = "Cat",sKColors = SKColors.Pink ,Values = 2587 },
new Profile{Id = 2,Name = "Horse",sKColors = SKColors.Green, Values = 365 },
new Profile{Id = 3,Name = "Tiger",sKColors = SKColors.Blue, Values = 257 }
};
foreach (var item in ProfileDetails)
{
_total = _total + item.Values;
}
foreach (var item in ProfileDetails)
{
PercentageCalculator(item.Values);
ArcPercentCalculator(_percentage);
SweepAngle = (float)_arcAnglePoint;
SweepAngle = (float)Math.Round(SweepAngle, 2);
if (item.Id == 0)
{
StartAngle = (float)0;
_temp = SweepAngle;
}
else
{
StartAngle = (float)_temp - 1;
var x = SweepAngle;
_temp = _temp + x;
}
path.AddArc(_rect, StartAngle, SweepAngle);
canvas.DrawPath(path, _arcPaint);
}
}
canvas.DrawCircle(center, 80, FilledCircle);
}
private void ArcPercentCalculator(float _percentage)
{
var _sweepAngle = (_percentage / 100) * 360;
_arcAnglePoint = _sweepAngle;
_arcAnglePoint = _arcAnglePoint * -1;
}
private void PercentageCalculator(float values)
{
var percent = (values / _total) * 100;
_percentage = percent;
}
}
public class Profile
{
public int Id { get; set; }
public string Name { get; set; }
public float Values { get; set; }
public SKColor sKColors { get; set; }
}
我将我的可观察集合移出了 foreach 循环,并将 SKPaint 及其对象移到了 foreach 循环内,这样它每次都会创建对象及其属性来创建新的弧线。我正在尝试获取它的大纲和命名标签,很快就会更新代码
public partial class MyCustomCanvasView : ContentPage
{
public MyCustomCanvasView()
{
InitializeComponent();
}
public SKPaint _arcPaint;
public float _temp;
public float _total;
public float _percentage;
public float _arcAnglePoint;
public SKColor _Color;
private ObservableCollection<Profile> _profileDetails;
public ObservableCollection<Profile> ProfileDetails
{
get { return _profileDetails; }
set
{
_profileDetails = value;
OnPropertyChanged(nameof(ProfileDetails));
}
}
private float _sweepAngle = 0;
public float SweepAngle
{
get { return _sweepAngle; }
set
{
_sweepAngle = value;
OnPropertyChanged(nameof(SweepAngle));
}
}
private float _startAngle = 0;
public float StartAngle
{
get { return _startAngle; }
set
{
_startAngle = value;
OnPropertyChanged(nameof(SweepAngle));
}
}
void OnCanvasViewPaintSurface(System.Object sender, SkiaSharp.Views.Forms.SKPaintSurfaceEventArgs args)
{
SKImageInfo info = args.Info;
SKSurface surface = args.Surface;
SKCanvas canvas = surface.Canvas;
canvas.Clear();
SKPaint FilledCircle = new SKPaint
{
Style = SKPaintStyle.Fill,
Color = Color.LightGray.ToSKColor(),
};
SKPaint arcPaint = new SKPaint
{
Style = SKPaintStyle.Stroke,
StrokeWidth = 200,
Color = SKColors.Green //_Color
};
_arcPaint = arcPaint;
SKPoint center = new SKPoint(info.Width / 2, info.Height / 2);
SKRect _rect = new SKRect(center.X - 150, center.Y - 150, center.X + 150, center.Y + 150);
ProfileDetails = new ObservableCollection<Profile>()
{
new Profile{Id = 0,Name = "Dog", sKColors = SKColors.Red , Values = 541 },
new Profile{Id = 1,Name = "Cat",sKColors = SKColors.Pink ,Values = 2587 },
new Profile{Id = 2,Name = "Horse",sKColors = SKColors.Green, Values = 365 },
new Profile{Id = 3,Name = "Tiger",sKColors = SKColors.Blue, Values = 257 }
};
foreach (var item in ProfileDetails)
{
_total = _total + item.Values;
}
foreach (var item in ProfileDetails)
{
PercentageCalculator(item.Values);
ArcPercentCalculator(_percentage);
SweepAngle = (float)_arcAnglePoint;
SweepAngle = (float)Math.Round(SweepAngle, 2);
if (item.Id == 0)
{
StartAngle = (float)0;
_temp = SweepAngle;
}
else
{
StartAngle = (float)_temp - 1;
var x = SweepAngle;
_temp = _temp + x;
}
using (SKPath path = new SKPath())
using (SKPaint fillPaint = new SKPaint())
using (SKPaint outlinePaint = new SKPaint())
{
fillPaint.Style = SKPaintStyle.Stroke;
fillPaint.StrokeWidth = 150;
fillPaint.Color = item.sKColors; //_Color
path.AddArc(_rect, StartAngle, SweepAngle);
canvas.DrawPath(path, fillPaint);
}
}
// canvas.DrawCircle(center, 80, FilledCircle);
}
private void ArcPercentCalculator(float _percentage)
{
var _sweepAngle = (_percentage / 100) * 360;
_arcAnglePoint = _sweepAngle;
_arcAnglePoint = _arcAnglePoint * -1;
}
private void PercentageCalculator(float values)
{
var percent = (values / _total) * 100;
_percentage = percent;
}
}
public class Profile
{
public int Id { get; set; }
public string Name { get; set; }
public float Values { get; set; }
public SKColor sKColors { get; set; }
}