Xamarin.Forms 中的 SkiaSharp 弧,区分弧的颜色

如何解决Xamarin.Forms 中的 SkiaSharp 弧,区分弧的颜色

我是 Xamarin.Forms 中 SkiaSharp 的新手, 我正在尝试创建最终形成饼图的弧线。 目前我无法为我的可观察集合中的对象获取不同的颜色。 输出以所有弧中最后一个对象(即:tiger = SKColors.Blue)的颜色属性结束。

我真的需要类似于图 1 的输出,其中 as 以图 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; }
    }

enter image description here

解决方法

我将我的 observable 集合移出 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; }
}

enter image description here

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
错误1:Request method ‘DELETE‘ not supported 错误还原:controller层有一个接口,访问该接口时报错:Request method ‘DELETE‘ not supported 错误原因:没有接收到前端传入的参数,修改为如下 参考 错误2:cannot r
错误1:启动docker镜像时报错:Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法:重启docker -&gt; systemctl r
错误1:private field ‘xxx‘ is never assigned 按Altʾnter快捷键,选择第2项 参考:https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2:启动时报错,不能找到主启动类 #
报错如下,通过源不能下载,最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
错误1:maven打包报错 错误还原:使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
错误1:服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
错误1:运行项目后报如下错误 解决方案 报错2:Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案:在pom.
参考 错误原因 过滤器或拦截器在生效时,redisTemplate还没有注入 解决方案:在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-
参考1 参考2 解决方案 # 点击安装源 协议选择 http:// 路径填写 mirrors.aliyun.com/centos/8.3.2011/BaseOS/x86_64/os URL类型 软件库URL 其他路径 # 版本 7 mirrors.aliyun.com/centos/7/os/x86
报错1 [root@slave1 data_mocker]# kafka-console-consumer.sh --bootstrap-server slave1:9092 --topic topic_db [2023-12-19 18:31:12,770] WARN [Consumer clie
错误1 # 重写数据 hive (edu)&gt; insert overwrite table dwd_trade_cart_add_inc &gt; select data.id, &gt; data.user_id, &gt; data.course_id, &gt; date_format(
错误1 hive (edu)&gt; insert into huanhuan values(1,&#39;haoge&#39;); Query ID = root_20240110071417_fe1517ad-3607-41f4-bdcf-d00b98ac443e Total jobs = 1
报错1:执行到如下就不执行了,没有显示Successfully registered new MBean. [root@slave1 bin]# /usr/local/software/flume-1.9.0/bin/flume-ng agent -n a1 -c /usr/local/softwa
虚拟及没有启动任何服务器查看jps会显示jps,如果没有显示任何东西 [root@slave2 ~]# jps 9647 Jps 解决方案 # 进入/tmp查看 [root@slave1 dfs]# cd /tmp [root@slave1 tmp]# ll 总用量 48 drwxr-xr-x. 2
报错1 hive&gt; show databases; OK Failed with exception java.io.IOException:java.lang.RuntimeException: Error in configuring object Time taken: 0.474 se
报错1 [root@localhost ~]# vim -bash: vim: 未找到命令 安装vim yum -y install vim* # 查看是否安装成功 [root@hadoop01 hadoop]# rpm -qa |grep vim vim-X11-7.4.629-8.el7_9.x
修改hadoop配置 vi /usr/local/software/hadoop-2.9.2/etc/hadoop/yarn-site.xml # 添加如下 &lt;configuration&gt; &lt;property&gt; &lt;name&gt;yarn.nodemanager.res