WPF畫圓弧 前臺、後臺兩種方式

WPF製作了一個環形的進度條,如圖,其中主要就是使用Path,然後給新建圓弧,前臺Path.Data是不可能的了,要後臺新建圓弧,接下來就是相應方法

 

先給個xaml的例子

        <!--起點 起點x,起點y 畫橢圓 長軸,短軸 旋轉角度 是否是優弧 正角方向繪製 終點x,終點y -->

        <Path x:Name="cycleProcess" Data="M50,95 A45,45 0 1 1  95, 45" Stroke="#3CB4E5" StrokeThickness="4">

            <Path.RenderTransform>

                <RotateTransform x:Name="rotate">



                </RotateTransform>

            </Path.RenderTransform>

        </Path>

 

首先需要明白一點,圓弧無法打開100%,如果到了100%那就變成了點,所以在數值到了100%的時候需要手動調整爲不滿100,可以是99.999;

起點確定,終點座標使用三角函數計算,然後就是判斷在第幾象限,每個象限加減不同

此處給出刷新方法,可自行參考       

 

 private void Update()

        {

            RangeValue = Max - Min;



            //百分比

            if(CycleProgressBarValueType == CycleProgressBarValueType.Percentage)

            {

                valueLabel.Content = ((int)(Value / RangeValue * 1000)) / 10f;

            }

            //數字模式

            else if(CycleProgressBarValueType == CycleProgressBarValueType.Value)

            {

                valueLabel.Content = Value;

            }

           



            showValue = Value;

            if (showValue == Max)

                showValue = Max - 0.001;



            height = Height;

            if(double.IsNaN(height))

                height = ActualHeight;

            width = Width;

            if (double.IsNaN(width))

                width = ActualWidth;

            if (height <= 0) return;

            if (width <= 0) return;



            rotate.CenterX = height / 2d;

            rotate.CenterY = width / 2d;

            rotate.Angle = OffValue / 2d;



            double value = showValue / RangeValue * (360 - OffValue);

            value = value / 180 * Math.PI;



            double x = 0;

            double y = 0;



            double cos = 0;

            double sin = 0;



            //按照起點算象限  最下方爲起點

            bool isLargeArc = false;



            //左下角

            if (value <= Math.PI / 2d)

            {

                cos = Math.Cos(value);

                sin = Math.Sin(value);



                x = width / 2d - (width / 2d - 5) * sin;

                y = height / 2d + (height / 2d - 5) * cos;

            }

            //左上角

            else if (value <= Math.PI)

            {

                value -= Math.PI / 2.0;

                cos = Math.Cos(value);

                sin = Math.Sin(value);



                x = width / 2d - (width / 2d - 5) * cos;

                y = height / 2d - (height / 2d - 5) * sin;

            }

            //右上角

            else if (value <= Math.PI * 3/2.0)

            {

                value -= Math.PI;

                isLargeArc = true;



                cos = Math.Cos(value);

                sin = Math.Sin(value);



                x = width / 2d + (width / 2d - 5) * sin;

                y = height / 2d - (height / 2d - 5) * cos;

            }

            //右下角

            else

            {

                value -= Math.PI *3 / 2.0;

                isLargeArc = true;



                cos = Math.Cos(value);

                sin = Math.Sin(value);



                x = width / 2d + (width / 2d - 5) * cos;

                y = height / 2d + (height / 2d - 5) * sin;

            }







            ArcSegment arcSegment = new ArcSegment(new Point(x,y), new Size(width / 2 - 5, height / 2 - 5), 0,

                isLargeArc, SweepDirection.Clockwise, true);

            PathSegmentCollection pathSegments = new PathSegmentCollection();

            pathSegments.Add(arcSegment);



            PathFigure pathFigure = new PathFigure(new Point(width / 2, height - 5), pathSegments, false);



            PathFigureCollection pathFigures = new PathFigureCollection();

            pathFigures.Add(pathFigure);



            PathGeometry pathGeometry = new PathGeometry();

            pathGeometry.Figures = pathFigures;



            //GeometryGroup geometryGroup = new GeometryGroup();

            //geometryGroup.Children.Add(pathGeometry);



            cycleProcess.Data = pathGeometry;

        }

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章