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

一,1道几何题

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

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

求:未知点坐标

思路,如下:

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

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

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

二,写个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, ) + Math.Pow(a.y - b.y, ));
}
} private Point GetPoint(Point a, Point b, double otherLength)
{
Point p = new Point(, ); 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 = ;
double radius = ; //a:起点 b:终点 p:a,b之间任意一点
Point a1 = new Point(, );
Point b1 = new Point(, );
}

三,绘制一个扇形

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

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

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

效果图

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

四,绘制环形

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

思路:

上图由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,  缓动动画

上一篇:jdk7 中Collections.sort 异常


下一篇:表空间移动(transporting tablespaces)