SkiaSharp Arcs in Xamarin.Forms，区分 Colors for Arcs

Question

我是 Xamarin.Forms 中 SkiaSharp 的新手，我正在尝试创建应该最终形成饼图的弧线。 目前我无法为我的可观察集合中的对象获得不同的 colors。 output 以所有弧线中的最后一个对象（即：tiger = SKColors.Blue）颜色属性结束。

我真的需要类似于图 1 的 output，其中以图 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; }
    }

Answer 1

我将我的 observable 集合移出 foreach 循环，并将 SKPaint 及其 object 移到 foreach 循环内，因此它将创建 object 及其每次创建新弧的属性。 我正在尝试获取它的大纲和命名标签，并将很快更新代码

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; }
}