Sliverlight实例之 绘制扇形和环形图

 

一，1道几何题

 

 

 

已知两点坐标确定一条直线，直线上存在一个未知点，起始点与未知点的距离已知

求：未知点坐标

 

思路，如下：

 

 

求AB长度，可以根据两点距离公式

 

 

 

 

 

 

二，写个C#类

 

定义一个Point类，代表坐标,它有两个成员x和y

定义一个方法GetLength，获取两点距离

 

       /*

            有两点坐标a(1,24) b(35,58) 连成一条直线，现在ab连线有一点p，pa长度为12

            求：p点的坐标

        */

        class Point

        {

            public double x;

            public double y;

            public Point(int x,int y)

            {

                this.x=x;

                this.y=y;

            }

            public static double GetLength(Point a,Point b)

            {

                return Math.Sqrt(Math.Pow(a.x - b.x, 2) + Math.Pow(a.y - b.y, 2));

            }

        }





       private Point GetPoint(Point a, Point b, double otherLength)

        {

            Point p = new Point(0, 0);



            p.x = otherLength * (b.x - a.x) / Point.GetLength(a, b) + a.x;

            p.y = otherLength * (b.y - a.y) / Point.GetLength(a, b) + a.y;



            return p; 

        }





        //测试方法

        static void main()

        {

            double otherLength = 12;

            double radius = 58;



            //a：起点      b:终点    p:a,b之间任意一点

            Point a1 = new Point(1, 24);

            Point b1 = new Point(35, 58);

      }

 

 

 

 

三，绘制一个扇形

 

思路：使用PathGeometry中的LinearSegment和ArcSegment来绘制

 

 

 

 

(1)     确定两点坐标，绘制一条直线

(2)     已知半径长度，得到圆心坐标

(3)     按任意偏角绘制一条弧形

 

这个任意偏角，是个重点问题：

(1)，  另一边在弧上坐标

(2)，  如何把这个弧度做成依赖属性配置的

 

xaml代码：

       <Path x:Name="PathFillColor" Fill="Green" Canvas.Top="100" Canvas.Left="100" Stroke="Black" StrokeThickness="2">

                <Path.Data>

                    <PathGeometry>

                        <PathFigure StartPoint="1,24" IsClosed="True">

                        <LineSegment Point="9.48528137423857,32.4852813742386"/>

                        <ArcSegment Size="80,80" Point="59,13" SweepDirection="Clockwise"/>

                        <LineSegment Point="59,1"/>

                        <ArcSegment Size="80,80" Point="1,24" SweepDirection="Counterclockwise"/>

                    </PathFigure>

                    </PathGeometry>  

                </Path.Data>

            </Path>

 

 

效果图

 

 

 

 

 

四，绘制环形

 

 

 

思路：

上图由8个扇形组成，即每个扇形偏角45度

可以用8个按钮代替

 

那么:

将按钮做成控件模板，内容就是一个扇形

则8个按钮使用这个控件模板

再对每个按钮进行45度旋转（使用RotateTransform实现）

 

 

定义控件模板

<UserControl.Resources>

        <Style x:Key="CircleStyle1" TargetType="Button">

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate>

                        <Canvas>

                            <Canvas>

                                <Canvas.RenderTransform>

                                    <TransformGroup>

                                        <ScaleTransform x:Name="RenderScaleX" />

                                        <RotateTransform/>

                                    </TransformGroup>

                                </Canvas.RenderTransform>

                                <Path x:Name="PathFillColor" Fill="{TemplateBinding Button.Background}">

                                    <Path.Data>

                                        <PathGeometry>

                                            <PathFigure StartPoint="1,24" IsClosed="True">

                                                <!--

                                                <LineSegment Point="35,58"/>

                                                <ArcSegment Size="30,30" Point="59,48" SweepDirection="Clockwise"/>

                                                <LineSegment Point="59,1"/>

                                                <ArcSegment Size="80,80" Point="1,24" SweepDirection="Counterclockwise"/>

                                                -->

                                                <LineSegment Point="9.48528137423857,32.4852813742386"/>

                                                <ArcSegment Size="80,80" Point="59,13" SweepDirection="Clockwise"/>

                                                <LineSegment Point="59,1"/>

                                                <ArcSegment Size="80,80" Point="1,24" SweepDirection="Counterclockwise"/>

                                            </PathFigure>

                                        </PathGeometry>

                                    </Path.Data>

                                </Path>

                                <TextBlock Foreground="Black" Text="{TemplateBinding Button.Content}"  Canvas.Left="20" Canvas.Top="20">

                                    <TextBlock.RenderTransform>

                                        <RotateTransform Angle="-25"/>

                                    </TextBlock.RenderTransform>

                                </TextBlock>

                            </Canvas>

                        </Canvas>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>



    </UserControl.Resources>

 

 

使用样式

<Button x:Name="btn1" Background="#0024CE" Height="60" Width="60" Margin="42,18,0,0" Canvas.Top="0" Canvas.Left="0" RenderTransformOrigin="0.97,1.4" Content="1" Style="{StaticResource CircleStyle1}">

                <Button.RenderTransform>

                    <TransformGroup>

                        <RotateTransform/>

                    </TransformGroup>

                </Button.RenderTransform>

            </Button>



            <Button x:Name="btn2" Background="#00ace7" Height="60" Width="60" Margin="42,18,0,0" Canvas.Top="0" Canvas.Left="0" RenderTransformOrigin="0.97,1.4" Content="2" Style="{StaticResource CircleStyle1}">

                <Button.RenderTransform>

                    <TransformGroup>

                        <RotateTransform Angle="45"/>

                    </TransformGroup>

                </Button.RenderTransform>

            </Button>



            <Button x:Name="btn3" Background="#9dff00"  Height="60" Width="60" Margin="42,18,0,0" Canvas.Top="0" Canvas.Left="0" RenderTransformOrigin="0.97,1.4"  Content="3" Style="{StaticResource CircleStyle1}">

                <Button.RenderTransform>

                    <TransformGroup>

                        <RotateTransform Angle="90"/>

                    </TransformGroup>

                </Button.RenderTransform>

            </Button>

 

 

未解决：

1，任意偏角，是个重点问题：

(1)，  另一边在弧上坐标

(2)，  这个弧的弧度(ArcSegment中的Size或Angle属性)

(3)，  如何把这个弧度做成依赖属性配置的 

2，做成一个自定义控件

 

有时间，再完成 

 

准备知识：

1，  平面几何思维(三角形，圆，弧，曲线，斜率，方程式)

2，  三次贝塞尔曲线的数学公式

3，  定时器与动画的区别是时间序列

4，  缓动动画