快捷導(dǎo)航

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

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

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

思路

我們可以使用Ellipse先畫出一個(gè)圓當(dāng)背景,然后用Canvas再疊加畫上刻度線,就能得到如下的效果

我們先用Ellipse畫一個(gè)橙色的圓,然后將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)在只需要知道點(diǎn)的位置,就可以通過(guò)canvas畫出相應(yīng)的線條了.

計(jì)算圓上點(diǎn)的位置

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

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

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

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

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

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

1、角度定義

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

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

即弧度 = 弧長(zhǎng) / 半徑

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

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

使用canvas畫出線段

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

假設(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用藍(lán)色填充,然后把X點(diǎn)設(shè)為(0,0)來(lái)看下效果可知,圓心的位置為左上角,我們可以先把刻度都畫出來(lái),再移動(dòng)下canvas繪畫的起點(diǎn)到橙色圓的圓心就行了

我們把360度分成100分來(lái)畫出100個(gè)刻度線,代碼如下

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點(diǎn)和Z點(diǎn)都加上半徑就能把canvas繪畫的起點(diǎn)移動(dòng)到圓心的位置,把canvas的背景色去掉效果就實(shí)現(xiàn)我們想要的效果了

完整的代碼如下

前臺(tái)代碼

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

后臺(tái)代碼

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