`
yiyeqinghuasoon
  • 浏览: 641893 次
文章分类
社区版块
存档分类
最新评论

第27课 使用Brush进行填充

 
阅读更多

概述

本文将简单介绍Silverlight中的画刷，在Silverlight中，共提供了五种：SolidColorBrush、LinearGradientBrush、RadialGradientBrush、ImageBrush、VideoBrush，接下来将逐一进行介绍。

SolidColorBrush

SolidColorBrush用单一的颜色进行填充， 在使用SolidColorBrush时只要指定Color属性就可以了，除此之外，还可以选择指定Opacity等属性。在我们使用其他图形时，如果指定了Fill属性，则默认会用SolidColorBrush进行填充。下面的示例，使用SolidColorBrush填充两个矩形：

Canvas Background="#CDFCAE">
    Rectangle Canvas.Top="60" Canvas.Left="20"
               Width="200" Height="100" Stroke="Green"
               StrokeThickness="2">
        Rectangle.Fill>
            SolidColorBrush Color="Orange">
            SolidColorBrush>
        Rectangle.Fill>
    Rectangle>
    
    Rectangle Canvas.Top="60" Canvas.Left="280"
               Width="200" Height="100" Stroke="Green"
               StrokeThickness="2">
        Rectangle.Fill>
            SolidColorBrush Color="Orange"
                             Opacity="0.5">
            SolidColorBrush>
        Rectangle.Fill>
    Rectangle>
Canvas>

运行后如下所示：

TerryLee_Silverlight2_0129

LinearGradientBrush

LinearGradientBrush将会使用线性渐变来进行填充，需要设置渐变的坐标：起始点属性StartPoint和结束点EndPoint，两点的坐标最大值为1，最小值为0，用GradientStop来设置不同的颜色渐变以及它的偏移量。如下面的例子：

Canvas Background="#FFFFFF">
    Rectangle Canvas.Top="40" Canvas.Left="100"
           Width="300" Height="160" Stroke="Green"
           StrokeThickness="4">
        Rectangle.Fill>
            LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                GradientStop Color="#FBFE03" Offset="0.0" />
                GradientStop Color="#41F702" Offset="0.25" />
                GradientStop Color="#FF0000" Offset="0.75" />
                GradientStop Color="#0066FF" Offset="1.0" />
            LinearGradientBrush>
        Rectangle.Fill>
    Rectangle>
Canvas>

运行后如下图所示：

TerryLee_Silverlight2_0130

下面我们对渐变的坐标以及各个颜色渐变的偏移量做一下解释，如下图所示：

TerryLee_Silverlight2_0131

设置不同的渐变起始点和偏移量我们可以得到多种不同的渐变效果，如下面的示例：

Canvas Background="#FFFFFF">
    Rectangle Canvas.Top="80" Canvas.Left="20"
           Width="120" Height="80" Stroke="Green"
           StrokeThickness="4">
        Rectangle.Fill>
            LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                GradientStop Color="#FBFE03" Offset="0.0" />
                GradientStop Color="#41F702" Offset="0.25" />
                GradientStop Color="#FF0000" Offset="0.75" />
                GradientStop Color="#0066FF" Offset="1.0" />
            LinearGradientBrush>
        Rectangle.Fill>
    Rectangle>
    
    Rectangle Canvas.Top="80" Canvas.Left="160"
           Width="120" Height="80" Stroke="Green"
           StrokeThickness="4">
        Rectangle.Fill>
            LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                GradientStop Color="#FBFE03" Offset="0.0" />
                GradientStop Color="#41F702" Offset="0.25" />
                GradientStop Color="#FF0000" Offset="0.75" />
                GradientStop Color="#0066FF" Offset="1.0" />
            LinearGradientBrush>
        Rectangle.Fill>
    Rectangle>
    
    Rectangle Canvas.Top="80" Canvas.Left="300"
           Width="120" Height="80" Stroke="Green"
           StrokeThickness="4">
        Rectangle.Fill>
            LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                GradientStop Color="#FBFE03" Offset="0.0" />
                GradientStop Color="#41F702" Offset="0.25" />
                GradientStop Color="#FF0000" Offset="0.75" />
                GradientStop Color="#0066FF" Offset="1.0" />
            LinearGradientBrush>
        Rectangle.Fill>
    Rectangle>
Canvas>

运行后如下图所示：

TerryLee_Silverlight2_0132

RadialGradientBrush

RadialGradientBrush使用放射性渐变来进行颜色填充，用GradientOrigin来指定放射源的位置坐标，Center指定图形的中心位置坐标，RadiusX和RadiusY分别指定在X轴和Y轴上的放射半径，同样使用GradientStop指定不同颜色的渐变及偏移量，如下面的例子：

Canvas Background="#CDFCAE">
    Ellipse Canvas.Top="30" Canvas.Left="100"
             Width="300" Height="180">
        Ellipse.Fill>
            RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5"
                                RadiusX="0.5" RadiusY="0.5">
                GradientStop Color="#FBFE03" Offset="0.0" />
                GradientStop Color="#41F702" Offset="0.25" />
                GradientStop Color="#FF0000" Offset="0.75" />
                GradientStop Color="#0066FF" Offset="1.0" />
            RadialGradientBrush>
        Ellipse.Fill>
    Ellipse>
Canvas>

运行后如下所示：

TerryLee_Silverlight2_0133

在这个示例中，对于上面提到的放射源位置的坐标和图形中心坐标、在X轴和Y轴上的放射半径它们四个之间的关系，大家看下面四个圆形，我们为四个属性设置不同的值：

Canvas Background="#CDFCAE">
    Ellipse Canvas.Top="20" Canvas.Left="80"
             Width="120" Height="120">
        Ellipse.Fill>
            RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5"
                                RadiusX="0.5" RadiusY="0.5">
                GradientStop Color="#FFFFFF" Offset="0.0" />
                GradientStop Color="#000000" Offset="1.0" />
            RadialGradientBrush>
        Ellipse.Fill>
    Ellipse>
    
    Ellipse Canvas.Top="20" Canvas.Left="280"
             Width="120" Height="120">
        Ellipse.Fill>
            RadialGradientBrush GradientOrigin="0.75,0.25" Center="0.5,0.5"
                                RadiusX="0.5" RadiusY="0.5">
                GradientStop Color="#FFFFFF" Offset="0.0" />
                GradientStop Color="#000000" Offset="1.0" />
            RadialGradientBrush>
        Ellipse.Fill>
    Ellipse>
    
    Ellipse Canvas.Top="160" Canvas.Left="80"
             Width="120" Height="120">
        Ellipse.Fill>
            RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5"
                                RadiusX="0.25" RadiusY="0.5">
                GradientStop Color="#FFFFFF" Offset="0.0" />
                GradientStop Color="#000000" Offset="1.0" />
            RadialGradientBrush>
        Ellipse.Fill>
    Ellipse>
    
    Ellipse Canvas.Top="160" Canvas.Left="280"
             Width="120" Height="120">
        Ellipse.Fill>
            RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5"
                                RadiusX="0.5" RadiusY="0.25">
                GradientStop Color="#FFFFFF" Offset="0.0" />
                GradientStop Color="#000000" Offset="1.0" />
            RadialGradientBrush>
        Ellipse.Fill>
    Ellipse>
Canvas>

运行后的效果如下所示，在图上标注了他们各自的放射源位置坐标、中心位置坐标、X轴上和Y轴上的放射半径。

TerryLee_Silverlight2_0134

ImageBrush

ImageBrush使用图片来对图形进行填充，使用方式比较简单，我们只需要指定ImageSource属性就可以了，如下面的例子使用图片来填充一个矩形：

Canvas Background="#CDFCAE">
    Rectangle Canvas.Top="40" Canvas.Left="100"
       Width="300" Height="160" Stroke="Green"
       StrokeThickness="4" RadiusX="10" RadiusY="10">
        Rectangle.Fill>
            ImageBrush ImageSource="bg1.png">ImageBrush>
        Rectangle.Fill>
    Rectangle>
Canvas>

运行后效果如下所示：

TerryLee_Silverlight2_0135

对于图片我们后面会有专门一篇文章进行讲解，这里就不再说明。

结束语

本文简单介绍了Silverlight中的Brushes，这些Brushes对于自定义控件的外观或者做出更酷更炫的界面效果，将会有很大的帮助。

分享到：
| 第26课 基本图形
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Brush

    Brush

    FontBrush

    FontBrush

    Multiple Terrain Brush 1.5

    Multiple Terrain Brush is an editor tool with brushes for heightmaps and textures that work on multiple terrains. You can easily paint heightmap and textures, without switching from terrain to terrain...

    3D Brush 1.2.5 + 视频教程

    3D Brush allows you to quickly paint prefabs to your scene with all of the features you would expect and many more. Easy to use and intuitive controls. You can also create custom shapes which can then...

    Tilt Brush [22.0-350de5f17].apk（oculus quest 游戏《谷歌绘图 tilt brush》）

    Tilt Brush [22.0-350de5f17].apk（oculus quest 游戏《谷歌绘图 tilt brush》） 在VR的世界中绘图的游戏（谷歌出品，必属精品，安卓游戏开发人员的最佳参考），上传的apk包可以直接使用安装在oculus quest中给...

    漂亮的舞动羽毛brush

    漂亮的舞动羽毛brush

    Photoshop Blur's good brush 7.0 pro笔刷

    Blur's Good Brush是针对数字绘画领域开发的一套专业Photoshop笔刷库，其分为General（综合）、Traditional（传统）、Mixer（混合器画笔）、Stylize（风格化）、Shape（形状）、FX（特效）、Texture（纹理）七大类，...

    贤者笔刷SAGE BRUSH 7.6

    PS 贤者笔刷SAGE BRUSH 7.6

    this a simple paint brush at its first level for begginers.I

    this a simple paint brush at its first level for begginers.I will soon give codes of full paint brush.

    Zbrush Armour_Brush.rar

    Zbrush Armour_Brush.rar

    Blur's good brush 5.1 pro

    Blur's Good Brush是针对...使用Blur's good brush可以方便快捷的帮助你实现数字绘画中的各种效果，比如传统绘画效果、视觉特效、纹理绘制等等，适合从事概念设计、插图设计、2D/3D动画制作、平面设计等专业人士使用。

    Brush stydy

    学习WPF 不错的实例 treeview 实例 好的架构

    decorative brush

    设计需要的画笔笔刷，多种变化，多种品种，风格多变，任意选择。

    Photoshop 专业数字绘画笔刷集 Blur’s Good Brush 7.0 Pro.zip

    Blur’s Good Brush 7.0 Pro 是针对数字绘画领域开发的一套专业 Photoshop 笔刷库，其分为 General（综合）、Traditional（传统）、Mixer（混合器画笔）、Stylize（风格化）、Shape（形状）、FX（特效）、Texture...

    前端项目-d3-brush.zip

    前端项目-d3-brush,使用鼠标或触摸选择一个一维或二维区域。

    HTC VR brush

    unity2017.3.1下用HTC vive的手柄的VR空间生产任意的曲线，导入就可以使用。

    Delphi 演示使用演示Brush对象的各种风格.rar

    Delphi 演示使用演示Brush笔刷对象后生成的各种风格，一种演示了7种笔刷效果，定义了一个存储绘图风格的7维数组，然后使用For循环对绘图风格数组赋值，然后使用Canvas.Brush.Style来预览风格。这些笔刷风格都是浅...

    C# 填充图型

    C#绘制图型，并指定背景图片进行填充的简洁代码

    tilt-brush 项目源码

    除本指南允许的范围外，对倾斜刷商标的任何使用都必须事先获得批准。 有关更多信息，请阅读《 。 建立应用程式 获取在您自己的设备上运行的Tilt Brush开源应用程序。 先决条件 Unity 2018.4.11f1 （可选-仅当您希望...

    tilt-brush-toolkit, 在你的创意项目中，帮助你使用倾斜笔刷数据的脚本和资产.zip

    tilt-brush-toolkit, 在你的创意项目中，帮助你使用倾斜笔刷数据的脚本和资产 倾斜画笔工具包倾斜画笔工具包是一组脚本和资产，允许你使用倾斜画笔在你的创意项目中数据。 如果只想将倾斜画笔几何图形导入 Unity，这...

Magicbox
Global site tag (gtag.js) - Google Analytics