快捷導(dǎo)航

WPF如何在圓形上優(yōu)雅地添加刻度線

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

這篇文章主要為大家詳細(xì)介紹了WPF如何在圓形上優(yōu)雅地添加刻度線,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

思路

我們可以使用Ellipse先畫出一個圓當(dāng)背景,然后用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>

然后我們現(xiàn)在只需要知道點的位置,就可以通過canvas畫出相應(yīng)的線條了.

計算圓上點的位置

假設(shè)我們要計算的點為X,那么隊員X點的坐標(biāo)為(X1,Y1)

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

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

使用Math.Sin來計算的話得先把角度轉(zhuǎn)換為弧度

角度轉(zhuǎn)換為弧度

參考文末補充內(nèi)容

1、角度定義

兩條射線從圓心向圓周射出，形成一個夾角和夾角正對的一段弧。當(dāng)弧長正好等于圓周長的360分之一時，兩條射線的夾角的大小為1度。(單位: º）

2、弧度定義
兩條射線從圓心向圓周射出，形成一個夾角和夾角正對的一段弧。當(dāng)這段弧長正好等于圓的半徑時，兩條射線的夾角大小為1弧度（單位：rad)

即弧度 = 弧長 / 半徑

圓一周的弧度=周長 / 半徑 => 2πr / r =360º => π=180º,繼而可以知道一弧度等于180º/π

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

使用canvas畫出線段

我們只需要計算出X點和Z點的坐標(biāo),就能使用Line來連接兩點畫出刻度線了.

假設(shè)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點設(shè)為(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的背景色去掉效果就實現(xiàn)我們想要的效果了

完整的代碼如下

前臺代碼

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