前言:Silverlight 2.0 Beta1 已经发布,加入了许多激动人心的新特性:WPF UI 框架、丰富的控件、丰富的网络支持、丰富的基础类库支持等。这是本人的学习笔记,写的比较乱,因此定名为乱弹琴Silverlight 2.0 系列文章。
本篇介绍Silverlight中的形状(Shape)。
这里的形状是指FrameworkElement的元素。Shape可以进行自我呈现并参与布局系统,Shape 对象用于呈现二维图形。与后面的几何图形(Geometry)有很大的区别。
Shape的继承层次:
System.Object
System.Windows.Threading.DispatcherObject
System.Windows.DependencyObject
System.Windows.Media.Visual
System.Windows.UIElement
System.Windows.FrameworkElement
System.Windows.Shapes.Shape
System.Windows.Shapes.Ellipse
System.Windows.Shapes.Line
System.Windows.Shapes.Path
System.Windows.Shapes.Polygon
System.Windows.Shapes.Polyline
System.Windows.Shapes.Rectangle
从继承可以看出,形状分为:椭圆(圆)、直线、路径、多边形、折线、矩形等。
其中:路径(Path)用于绘制一系列相互连接的直线和曲线,放在以后介绍。
Shape有一下通用属性:
Stroke:说明如何绘制形状的轮廓。
StrokeThickness:说明形状轮廓的粗细。
Fill:说明如何绘制形状的内部。
用于指定坐标和顶点的数据属性,以与设备无关的像素来度量。
由于形状使用绝对坐标,因此,Canvas是最佳的布局控件。
这里面每包含"点"(Point),在几何上点是没有大小、没有方向的,代表的是位置信息。如果画点可用单位长度的线段代替。
直线(Line)
(X1, Y1)为起点
(X2, Y2)为终点
XAML:
<Canvas x:Name="cvs" Background="DarkGreen">
<Line X1="10" Y1="20" X2="100" Y2="200"
Stroke="Yellow" StrokeThickness="5"></Line>
</Canvas>
C#:
Line l = new Line();
l.X1 = 10;
l.Y1 = 20;
l.X2 = 100;
l.Y2 = 200;
l.Stroke = new SolidColorBrush(Colors.Yellow);
l.StrokeThickness = 5;
cvs.Children.Add(l);
运行效果:
椭圆(Ellipse)
XAML:
<Canvas x:Name="cvs" Background="DarkGreen">
<Ellipse Width="100" Height="50" Stroke="Red" StrokeThickness="2"
Fill="Yellow" Canvas.Left="50" Canvas.Top="50"></Ellipse>
<Ellipse Width="75" Height="75" Stroke="Red" StrokeThickness="2"
Fill="Yellow" Canvas.Left="200" Canvas.Top="50"></Ellipse>
</Canvas>
C#:
Ellipse e1 = new Ellipse();
e1.Width = 100;
e1.Height = 50;
e1.StrokeThickness = 2;
e1.Fill = new SolidColorBrush(Colors.Yellow);
e1.Stroke = new SolidColorBrush(Colors.Red);
Canvas.SetLeft(e1, 50);
Canvas.SetTop(e1, 50);
cvs.Children.Add(e1);
//...
运行效果:
矩形(Rectangle)
矩形属于多边形,因为用的最多,所以抽取出来进行特殊的优化,以提高效率。
XAML:
<Canvas x:Name="cvs" Background="DarkGreen">
<Rectangle Width="100" Height="50" Fill="Yellow"
Canvas.Left="50" Canvas.Top="50" Stroke="Red" StrokeThickness="2">
</Rectangle>
<Rectangle Width="75" Height="75" Fill="Yellow"
Canvas.Left="200" Canvas.Top="50" Stroke="Red" StrokeThickness="2">
</Rectangle>
</Canvas>
C#:
Rectangle r = new Rectangle();
r.Width = 100;
r.Height = 50;
r.Fill = new SolidColorBrush(Colors.Yellow);
r.Stroke = new SolidColorBrush(Colors.Red);
r.StrokeThickness = 2;
Canvas.SetLeft(r, 50);
Canvas.SetTop(r, 50);
cvs.Children.Add(r);
运行效果:
多边形(Polygon)
将一系列点顺序连接起来构成的封闭形状。
XAML:
<Canvas x:Name="cvs" Background="DarkGreen">
<Polygon Points="10,10 200,200 10,200 100,160 100,50"
Fill="Yellow" Stroke="Red" StrokeThickness="2">
</Polygon>
</Canvas>
C#:
Polygon p = new Polygon();
PointCollection pc = new PointCollection();
pc.Add(new Point(10, 10));
pc.Add(new Point(200, 200));
pc.Add(new Point(10, 200));
pc.Add(new Point(100, 160));
pc.Add(new Point(100, 50));
p.Points = pc;
p.Fill = new SolidColorBrush(Colors.Yellow);
p.Stroke = new SolidColorBrush(Colors.Red);
p.StrokeThickness = 2;
cvs.Children.Add(p);
运行效果:
折线(Polyline)
与多边形的区别:多边形首点与尾点有连线,而折线没有。
XAML:
<Polyline Points="10,10 200,200 10,200 100,160 100,50"
Fill="Yellow" Stroke="Red" StrokeThickness="2">
</Polyline>
C#:
Polyline p = new Polyline();
PointCollection pc = new PointCollection();
pc.Add(new Point(10, 10));
pc.Add(new Point(200, 200));
pc.Add(new Point(10, 200));
pc.Add(new Point(100, 160));
pc.Add(new Point(100, 50));
p.Points = pc;
p.Fill = new SolidColorBrush(Colors.Yellow);
p.Stroke = new SolidColorBrush(Colors.Red);
p.StrokeThickness = 2;
cvs.Children.Add(p);
运行效果:
示例:生成Sierpinski垫片
算法:
private void Triangle(Point a, Point b, Point c, int n)
{
Color clr = Color.FromArgb(255, (byte)rad.Next(0, 255),
(byte)rad.Next(0, 255), (byte)rad.Next(0, 255));
if (n > 0)
{
Point p1 = new Point((a.X + b.X) / 2, (a.Y + b.Y) / 2);
Point p2 = new Point((a.X + c.X) / 2, (a.Y + c.Y) / 2);
Triangle(a, p1, p2, n - 1);
p1 = new Point((a.X + b.X) / 2, (a.Y + b.Y) / 2);
p2 = new Point((b.X + c.X) / 2, (b.Y + c.Y) / 2);
Triangle(b, p1, p2, n - 1);
p1 = new Point((b.X + c.X) / 2, (b.Y + c.Y) / 2);
p2 = new Point((a.X + c.X) / 2, (a.Y + c.Y) / 2);
Triangle(c, p1, p2, n - 1);
}
else
{
Polygon plgTriangle = new Polygon();
PointCollection pc = new PointCollection();
pc.Add(a);
pc.Add(b);
pc.Add(c);
plgTriangle.StrokeThickness = 0;
plgTriangle.Fill = new SolidColorBrush(clr);
plgTriangle.Points = pc;
cvs.Children.Add(plgTriangle);
}
}
结束语:
本篇介绍了形状(Shape),接下来几篇介绍几何图形(