WPF如何在圆形上优雅地添加刻度线

更新时间：2024年11月21日 11:31:33 作者：Cyril-Hcj

这篇文章主要为大家详细介绍了WPF如何在圆形上优雅地添加刻度线,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下

思路

我们可以使用Ellipse先画出一个圆当背景,然后用Canvas再叠加画上刻度线,就能得到如下的效果

我们先用Ellipse画一个橙色的圆,然后将Canvas的宽度和高度绑定到Ellipse的宽度和高度

<Grid>
        <Ellipse Fill="Orange" Width="400" Height="400" Name="BackEllipse"/>
        <Canvas x:Name="MainCanvas" 
                Width="{Binding Width,ElementName=BackEllipse}"
                Height="{Binding Height,ElementName=BackEllipse}"/>
</Grid>

然后我们现在只需要知道点的位置,就可以通过canvas画出相应的线条了.

计算圆上点的位置

假设我们要计算的点为X,那么队员X点的坐标为(X1,Y1)

sin(a)=Y1/r => Y1=r*sin(a)

cos(a)=X1/r => X1=r*cos(a)

使用Math.Sin来计算的话得先把角度转换为弧度

角度转换为弧度

参考文末补充内容

1、角度定义

两条射线从圆心向圆周射出，形成一个夹角和夹角正对的一段弧。当弧长正好等于圆周长的360分之一时，两条射线的夹角的大小为1度。(单位: º）

2、弧度定义
两条射线从圆心向圆周射出，形成一个夹角和夹角正对的一段弧。当这段弧长正好等于圆的半径时，两条射线的夹角大小为1弧度（单位：rad)

即弧度 = 弧长 / 半径

圆一周的弧度=周长 / 半径 => 2πr / r =360º => π=180º,继而可以知道一弧度等于180º/π

可知:sin(30º)=Math.Sin(30*Math.PI / 180)

使用canvas画出线段

我们只需要计算出X点和Z点的坐标,就能使用Line来连接两点画出刻度线了.

假设Z所在的圆的半径为r,X所在的圆的半径为(r-20)

double radius = BackEllipse.Width / 2;
    
            Line lineScale = new Line();
            lineScale.X1 = (radius - 20) * Math.Cos(30 * Math.PI / 180);
            lineScale.Y1 = (radius - 20) * Math.Sin(30 * Math.PI / 180);
            lineScale.X2 = radius * Math.Cos(30 * Math.PI / 180);
            lineScale.Y2 = radius * Math.Sin(30 * Math.PI / 180);

            lineScale.Stroke = Brushes.Red;
            lineScale.StrokeThickness = 2;
            MainCanvas.Children.Add(lineScale);

可以得到图像

我们先把把canvas用蓝色填充,然后把X点设为(0,0)来看下效果可知,圆心的位置为左上角,我们可以先把刻度都画出来,再移动下canvas绘画的起点到橙色圆的圆心就行了

我们把360度分成100分来画出100个刻度线,代码如下

double radius = BackEllipse.Width / 2;
            
            double min = 0; double max = 100;
            double step = 360.0 / (max - min);

            for (int i = 0; i < max - min; i++)
            {
                Line lineScale = new Line
                {
                    X1 = (radius - 20) * Math.Cos(i * step * Math.PI / 180),
                    Y1 = (radius - 20) * Math.Sin(i * step * Math.PI / 180),
                    X2 = radius * Math.Cos(i * step * Math.PI / 180),
                    Y2 = radius * Math.Sin(i * step * Math.PI / 180),
                    Stroke = Brushes.Red,
                    StrokeThickness = 2
                };

                MainCanvas.Children.Add(lineScale);
            }

我们只需要把X点和Z点都加上半径就能把canvas绘画的起点移动到圆心的位置,把canvas的背景色去掉效果就实现我们想要的效果了

完整的代码如下

前台代码

<Grid>
        <Ellipse Fill="Orange" Width="400" Height="400" Name="BackEllipse"/>
        <Canvas x:Name="MainCanvas" 
                Width="{Binding Width,ElementName=BackEllipse}"
                Height="{Binding Height,ElementName=BackEllipse}"/>
    </Grid>

后台代码

public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DoDraw();
        }

        private void DoDraw()
        {
            double radius = BackEllipse.Width / 2;

            double min = 0; double max = 100;
            double step = 360.0 / (max - min);

            for (int i = 0; i < max - min; i++)
            {
                Line lineScale = new Line
                {
                    X1 = ((radius - 20) * Math.Cos(i * step * Math.PI / 180)) + radius,
                    Y1 = ((radius - 20) * Math.Sin(i * step * Math.PI / 180)) + radius,
                    X2 = (radius * Math.Cos(i * step * Math.PI / 180)) + radius,
                    Y2 = (radius * Math.Sin(i * step * Math.PI / 180)) + radius,
                    Stroke = Brushes.Red,
                    StrokeThickness = 2
                };

                MainCanvas.Children.Add(lineScale);
            }
        }
    }

知识补充

角度与弧度互转

1、角度定义

两条射线从圆心向圆周射出，形成一个夹角和夹角正对的一段弧。当弧长正好等于圆周长的360分之一时，两条射线的夹角的大小为1度。(单位: º）

2、弧度定义

两条射线从圆心向圆周射出，形成一个夹角和夹角正对的一段弧。当这段弧长正好等于圆的半径时，两条射线的夹角大小为1弧度（单位：rad)。
可简单理解为：弧度 = 弧长 / 半径

3、弧长与弧度

圆的周长C的计算公式为：C = 2πr = πd (r - 半径；d - 直径)

圆一周的弧长为：2πr (弧长 = 周长）

圆一周的弧度为：2πr / r = 2π (根据：弧度 = 弧长 / 半径）

4、度与角度的转换

根据圆为360 º，弧度为2π，即 360º = 2π

角度转弧度：2π / 360 = π / 180 ≈ 0.0174rad, 即: 度数 * (π / 180） = 弧度

例如：将30º转为弧度rad

30º * (π / 180）= 0.523320 rad

弧度转角度: 360 / 2π = 180 / π ≈ 57.3º, 即: 弧度 * (180 / π） = 度数

例如：将0.523320rad转为度º

0.523320rad * (180 / π) = 29.9992352688º

到此这篇关于WPF如何在圆形上优雅地添加刻度线的文章就介绍到这了,更多相关WPF圆形添加刻度线内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

探秘Unity游戏开发中的状态设计模式
这篇文章主要介绍了探秘Unity游戏开发中的状态设计模式，状态模式是Unity游戏开发中常用的一种设计模式，可以帮助开发者更好地管理游戏对象状态，提高游戏的可维护性和可扩展性
2023-05-05
c# 实现KMP算法的示例代码
这篇文章主要介绍了c# 实现KMP算法的示例代码，帮助大家更好的理解和使用c#，感兴趣的朋友可以了解下
2020-11-11
.NET垃圾回收器(GC)原理浅析
这篇文章主要介绍了.NET垃圾回收器(GC)原理浅析,本文先是讲解了一些基础知识如托管堆(Managed Heap)、CPU寄存器(CPU Register)、根(Roots)等,然后讲解了垃圾回收的基本原理、算法等,需要的朋友可以参考下
2015-01-01
C# Winform消息通知系统托盘气泡提示框ToolTip控件
这篇文章主要为大家介绍了C#或Winform中的消息通知之系统托盘的气泡提示框窗口（系统toast通知）、ToolTip控件和ToolTipText属性详解,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
VS2019打包WPF安装程序最新教程(图文详解)
这篇文章主要介绍了VS2019打包WPF安装程序最新教程,本文图文并茂给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-11-11
基于C#调用OCX控件的常用方法(推荐)
下面小编就为大家分享一篇基于C#调用OCX控件的常用方法推荐，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2017-12-12
C#数据库操作的用法
这篇文章主要介绍了C#数据库操作的三种经典用法
2015-10-10
unity3d 对接 workerman 实现联机游戏功能
workerman 是一款开源高性能 PHP 应用容器，他除了用于互联网、即时通讯、APP 开发、硬件通讯、智能家居、物联网等领域的开发外，这篇文章主要介绍了unity3d 对接 workerman 实现联机游戏,需要的朋友可以参考下
2022-10-10
C#匿名委托和Java匿名局部内部类使用方法示例
Java在嵌套类型这里提供的特性比较多，假设：Java的字节码只支持静态嵌套类，内部类、局部内部类和匿名局部内部类都是编译器提供的语法糖，这个假设目前没法验证（看不懂字节码），本文先来看一下C#是如何为我们提供的这种语法糖
2013-11-11
WCF实现进程间管道通信Demo分享
下面小编就为大家分享一篇WCF实现进程间管道通信Demo，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2017-12-12