飘遥的Blog

C/C++/.NET
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

乱弹琴 Silverlight 2.0 (12) 形状(Shape)

Posted on 2008-04-15 04:54  Zzx飘遥  阅读(790)  评论(0编辑  收藏  举报

前言: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),接下来几篇介绍几何图形(Geometry)。