WPF/E CTP Quick Start - 第四部分：绘图与填充（翻译） - 老赵点滴

Spiga

Posts - 610, Comments - 30413
Main
Login

WPF/E CTP Quick Start - 第四部分：绘图与填充（翻译）

2006-12-09 23:23 by 老赵, 4211 visits

WPF/E通过提供Ellipse，Rectangle，Line，Polyline，Polygon和Path元素以支持矢量图。同样的，这些元素也被称之为“形状（Shape）”元素。

这片文档包含了以下部分

基础形状
其他形状元素
使用画刷填充形状
形状变换
下面该做什么呢？

基础元素

WPF/E提供了三种基本形状元素：Ellipse，Rectangle和Line。

Ellipse元素用于描述一个椭圆或者圆形。您可以通过设置它的Width和Height属性来分别控制它水平方向和垂直方向的直径。
Rectangle元素用于描述一个长方形或者正方形，圆角或直角。你能够通过设置它Width和Height属性来分别控制它水平和垂直方向上的距离。您也可以通过设置RadiusX和RadiusY属性来控制圆角的曲率。
您可以使用X1、Y1、X2、Y2属性来控制Line元素的尺寸和位置，而不是使用Width和Height属性。

下面的示例在Canvas中分别绘制了一个Ellipse，一个Rectangle和一个Line元素。

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30"
        Stroke="Black" StrokeThickness="10" Fill="SlateBlue"/>
    <Rectangle Height="100" Width="100" Canvas.Left="5" Canvas.Top="5"
        Stroke="Black" StrokeThickness="10" Fill="SlateBlue"/>
    <Line X1="280" Y1="10" X2="10" Y2="280"
        Stroke="black" StrokeThickness="5"/>
</Canvas>

重新开始查看内容

其它形状元素

除Ellipse，Line和Rectangle元素以外，WPF/E还提供了另外三种形状元素：Polygon，Polyline和Path。Polygon是一个由几条边组成的封闭形状，而Polyline是由一系列连接线组成，可能封闭也可能没有封闭的形状。下面的例子创建了一个Polygon和一个Polyline。

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Polyline Points="150, 150 150, 250 250, 250 250, 150"
        Stroke="Black" StrokeThickness="10"/>
    <Polygon Points="10,10 10,110 110,110 110,10"
        Stroke="Black" StrokeThickness="10" Fill="LightBlue"/>
</Canvas>

重新开始查看内容

Path元素能够用来表示一个复杂的形状，包括曲线和弧形。当您使用Path元素时，您需要使用一些特殊的语法来指定它Data属性的值。下面的例子创建了三个Path元素。

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Path Data="M0,0 L11.5,0 11.5,30 5.75,40 0,30z"
        Stroke="Black" Fill="SlateBlue"
        Canvas.Left="10" Canvas.Top="10" />

    <Path Data="M 10,100 C 10,300 300,-200 250,100z"
        Stroke="Red" Fill="Orange"
        Canvas.Left="10" Canvas.Top="10" />

    <Path Data="M 0,200 L100,200 50,50z"
        Stroke="Black" Fill="Gray"
        Canvas.Left="150" Canvas.Top="70" />

</Canvas>

重新开始查看内容

您可以查看WPF/E SDK中的Path Markup Syntax章节来得到关于Path标记语法的更多信息。

使用画刷填充形状

大多数的形状由两部分组成。“边框（Stroke）”和“填充（Fill）”，它们分别可以使用Stroke和Fill属性进行控制。下面的插图表示了在第一个例子里Rectangle的Strok和Fill。

不过，并不是每一个形状都有Fill和Stroke：Line元素只有Stroke，设置Line的Fill属性不会有任何效果。

您可以使用画刷（Brush）设置一个形状的Stroke和Fill。有4种类型的画刷可供选择：

SolidColorBrush
LinerGradientBrush
RadialGradientBrush
ImageBrush

使用SolidColorBrush填充实心颜色

为了使用实心颜色来填充一块区域，您可以使用SolidColorBrush，XAML提供了几种创建SolidColorBrush的方式。

您可以设置Color属性为指定的颜色名，例如“Black”或“Gray”
您可以设置Color属性为16进制表示的颜色，包括是否透明。您可以使用几种方式：
- 6位表示法。它的格式为#RRGGBB，其中RR为两位16进制数，用于描述红色所占的分量，GG和BB分别描述了绿色所占份量。例如：#0033FF。
- 8位表示法。它的格式和6位表示法大致相同，唯一的区别则是使用多余的两位描述alpha值，或者说是颜色的透明程度：#AARRGGBB。例如：#990033FF
您可以使用创建元素的方法来显式地创建一个SolidColorBrush并且设置它的Color属性。

下面的示例使用了多种方法将一个对象填充为黑色。

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <!-- SolidColorBrush by color name. -->
    <Ellipse Height="90" Width="90" Canvas.Left="10" Canvas.Top="10"
        Fill="black"/>

    <!-- SolidColorBrush by 6-digit hexadecimal notation. -->
    <Ellipse Height="90" Width="90" Canvas.Left="110" Canvas.Top="10"
        Fill="#000000"/>

    <!-- SolidColorBrush by 8-digit hexadecimal notation. -->
    <Ellipse Height="90" Width="90" Canvas.Left="10" Canvas.Top="110"
        Fill="#ff000000"/>

    <Ellipse Height="90" Width="90" Canvas.Left="110" Canvas.Top="110">
        <Ellipse.Fill>

            <!-- SolidColorBrush by object element syntax. -->
            <SolidColorBrush Color="Black"/>
        </Ellipse.Fill>
    </Ellipse>
</Canvas>

重新开始查看内容

使用LinarGradientBrush和RadialGradientBrush填充梯度效果

WPF/E支持线性和放射性的梯度效果。梯度包含了一个或多个“梯度逗留点（Gradients Stop）”用于描述梯度变化中颜色的位置和变化。大多数的梯度只需要两个梯度逗留点，不过事实上您可以添加任意多个。

LinearGradientBrush绘制线性的梯度效果。这条线在默认情况下是从被填充对象左上角到右下角的斜线。您可以使用StartPoint和EndPoint属性来改变这条线的位置。
RadialGradientBrush绘制类似于圆形的梯度效果。在默认情况下，这个圆形以填充区域的中心为圆心，您可以通过设置它的GradientOrigin，Center，RadiusX和RadiusY属性来自定义梯度效果。

您通过创建GradientStop对象来添加梯度逗留点。您可以通过设置GradientStop对象的Offset属性为0到1之间的值，来指定它在梯度中的相对位置。您通过设置GradientStop对象的Color属性为颜色名或者16进制表示法来指定颜色。

下面的示例使用LinearGradientBrush和RadialGradientBrush来填充Rectangle对象。

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
    <!-- Linear gradients -->
    <Rectangle Width="140" Height="70" Canvas.Left="10" Canvas.Top="10">
        <Rectangle.Fill>
            <LinearGradientBrush>
                <GradientStop Color="Yellow" Offset="0.0" />
                <GradientStop Color="Red" Offset="0.25" />
                <GradientStop Color="Blue" Offset="0.75" />
                <GradientStop Color="LimeGreen" Offset="1.0" />
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    
    <Rectangle Width="140" Height="70" Canvas.Left="155" Canvas.Top="10">
        <Rectangle.Fill>
            <LinearGradientBrush    StartPoint="0,0" EndPoint="1,0">
                <GradientStop Color="Yellow" Offset="0.0" />
                <GradientStop Color="Red" Offset="0.25" />
                <GradientStop Color="Blue" Offset="0.75" />
                <GradientStop Color="LimeGreen" Offset="1.0" />
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    
    <!-- Radial gradients -->
    <Rectangle Width="140" Height="70" Canvas.Left="10" Canvas.Top="110">
        <Rectangle.Fill>
            <RadialGradientBrush>
                <GradientStop Color="Yellow" Offset="0.0" />
                <GradientStop Color="Red" Offset="0.25" />
                <GradientStop Color="Blue" Offset="0.75" />
                <GradientStop Color="LimeGreen" Offset="1.0" />
            </RadialGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    
    <Rectangle Width="140" Height="70" Canvas.Left="155" Canvas.Top="110">
        <Rectangle.Fill>
            <RadialGradientBrush GradientOrigin="1,0">
                <GradientStop Color="Yellow" Offset="0.0" />
                <GradientStop Color="Red" Offset="0.25" />
                <GradientStop Color="Blue" Offset="0.75" />
                <GradientStop Color="LimeGreen" Offset="1.0" />
            </RadialGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
</Canvas>

重新开始查看内容

您也可以对于一个形状的Stroke填充梯度效果。

下面的插图标记了示例中第一个LinearGradientBrush对象的每一个梯度逗留点。

使用ImageBrush用图片填充对象

另一种类型的画刷是ImageBrush。在默认情况下，图片为被拉伸并且填满整个形状，不过您可以使用Stretch属性来控制拉伸图片的方式。下面的示例使用了两个ImageBrush对象，为它们的Stretch属性分别设置不同的值，用以填充两个Rectangle对象。

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Rectangle Height="180" Width="90" Canvas.Left="10" Canvas.Top="10"
        Stroke="Black" StrokeThickness="1">
        <Rectangle.Fill>
            <ImageBrush ImageSource="star.png"/>
        </Rectangle.Fill>
    </Rectangle>

    <Rectangle Height="180" Width="90" Canvas.Left="110" Canvas.Top="10"
        Stroke="Black" StrokeThickness="1">
        <Rectangle.Fill>
            <ImageBrush ImageSource="star.png" Stretch="Uniform"/>
        </Rectangle.Fill>
    </Rectangle>
</Canvas>

重新开始查看内容

形状变换

就像所有的UI元素那样，形状元素能够通过它们的RenderTransform属性被伸缩、旋转或者变换。

下面该做什么呢？

在下一部分“公有图形属性”中，您将会了解到一些属性的使用方式，例如Opacity，Clip和RenderTransform等。

Categories: 前端表现, 翻译引进
Tags:

本文基于署名 2.5 中国大陆许可协议发布，欢迎转载，演绎或用于商业目的，但是必须保留本文的署名赵劼（包含链接），具体操作方式可参考此处。如您有任何疑问或者授权方面的协商，请给我留言。

Add your comment

6 条回复

admin
链接
老赵 2006-12-09 23:26:00

居然这片又超过WLW的长度限制了，然后想继续编辑就麻烦了……

*.*.*.*
链接
billow 2006-12-10 00:20:00

呵呵，老赵，翻译的不错！支持！

admin
链接
老赵 2006-12-10 00:25:00

@billow
多谢支持。:)

顺便问一下有哪位朋友知道“Gradients Stop”应该怎么翻译吗？

*.*.*.*
链接
billow 2006-12-10 00:42:00

这里的Gradients梯度效果，应该是PS中通常所说的渐变吧。。。

admin
链接
老赵 2006-12-10 01:44:00

@billow
是啊，那么Gradients Stop呢？

*.*.*.*
链接
华夏时尚品牌网[未注册用户] 2006-12-10 10:21:00

华夏时尚品牌网

华夏时尚杂坛；http://www.cnsspp.cn/bbs/
时尚品牌，创业宝典，讨激励与成功的故事！两性话题、青春笑园、成功路上、电脑网络、强先知道了！

华夏电影频道:http://www.cnsspp.cn/movie/
在线免费电影高速观看，最新票房大片，精彩无限。赶快去看看吧！

华夏音乐频道:http://www.cnsspp.cn/music
新歌快线，华人专集、火暴DJ，应有尽有，打造专业的音乐网站，欢迎您的参与

精彩MTV、MV、FLASH视频，热门Flash游戏，热门Flash音乐热门Flash短片（搞笑）
http://www.cnsspp.cn/music/flash

还有爱情许愿树，先知您今天的感情命运！
本站网址：http://www.cnsspp.cn/love

老赵点滴 - 追求编程之美先做人，再做技术人员，最后做程序员。打造国内最好的.NET技术博客。