Silverlight学习笔记--绘制与着色（下）

最新推荐文章于 2017-11-17 19:50:00 发布

蝈蝈俊

最新推荐文章于 2017-11-17 19:50:00 发布

阅读量1.3k

点赞数

分类专栏： Silverlight 文章标签： silverlight colors class wpf object file

本文链接：https://blog.csdn.net/ghj1976/article/details/4872263

版权

Silverlight 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

下面是刷子的一些内容：

纯色刷子（SolidColorBrush）

Silverlight中使用纯色刷子可以有多种方式如下，

<object property="predefinedColor"/>
- or -
<object property="#rgb"/>
- or -
<object property="#argb"/>
- or -
<object property="#rrggbb"/>
- or -
<object property="#aarrggbb"/>
- or -
<object property="sc# scA,scR,scG,scB"/>

分别代表的意思如下：

predefinedColor Colors 类预定义的颜色之一。

rgb 一个三位数的十六进制数字。第一位数指定颜色的 R 值，第二位数指定 G 值，第三位数指定 B 值。例如 00F。

argb 一个四位数的十六进制数字。第一位数指定颜色的 A 值，第二位数指定其 R 值，下一位数指定 G 值，最后一位数指定其 B 值。例如 F00F。

rrggbb 一个六位数的十六进制数字。前两位数指定颜色的 R 值，下两位数指定其 G 值，最后两位数指定其 B 值。例如 0000FF。

aarrggbb 一个八位数的十六进制数字。前两位数指定颜色的 A 值，下两位数指定其 R 值，接下来的两位指定其 G 值，最后两位数指定其 B 值。例如 FF0000FF。

scA System.Single 颜色的 ScA 值。

scR System.Single 颜色的 ScR 值。

scG System.Single 颜色的 ScG 值。

scB System.Single 颜色的 ScB 值。

演示代码如下：

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Class="SilverlightStudy.MainPage"
	Width="640" Height="480">
<Canvas>
  <Ellipse Height="90" Width="90" Canvas.Left="10" Canvas.Top="10" Fill="black"/>

  <Ellipse Height="90" Width="90" Canvas.Left="110" Canvas.Top="10" Fill="#000000"/>

  <Ellipse Height="90" Width="90" Canvas.Left="210" Canvas.Top="10" Fill="#000" />

  <Ellipse Height="90" Width="90" Canvas.Left="310" Canvas.Top="10" Fill="sc# 0.0 0.0 1.0" />

  <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 Color="Black"/>
    
  
  Ellipse.Fill>
  
   
   Ellipse>
 
  <Ellipse Height="90" Width="90" Canvas.Left="210" Canvas.Top="110" Fill="#f000"/>
 
  
    
    Canvas>

     
     UserControl>

演示效果如下：

需要注明的是 WPF 中支持的另外一种颜色定义方式，如下，Silverlight 是不支持的：


  
  
  <Rectangle Width="50" Height="50"  Margin="10">
    <Rectangle.Fill>
      <SolidColorBrush Color="ContextColor 
	   file://C:/WINDOWS/system32/spool/drivers/color/sRGB%20Color%20Space%20Profile.icm
	   1.0,0.0,0.0,1.0"/>
    
  
  Rectangle.Fill>
  
   
   Rectangle>

线性渐变刷子（LinearGradientBrush）

默认的线性渐变是沿对角方向进行的。默认情况下，线性渐变的 StartPoint 是被绘制区域的左上角 (0,0)，其 EndPoint 是被绘制区域的右下角 (1,1)。所得渐变的颜色是沿着对角方向路径插入的。如下图显示了对角方向的渐变。图中添加了一条线，用于突出显示渐变从起点到终点的插值路径。

对角线方向线性渐变的渐变轴

具有突出显示的渐变停止点的对角线性渐变，如下图：

线性渐变中的渐变停止点

演示代码

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Class="SilverlightStudy.MainPage"
	Width="640" Height="480">
<Canvas>

  
  
  
  <Rectangle Width="140" Height="70" Canvas.Left="155" Canvas.Top="10">
    <Rectangle.Fill>
      <LinearGradientBrush  StartPoint="0,0" EndPoint="1,0">
        <GradientStop Color="Red" Offset="0.0" />
        <GradientStop Color="LimeGreen" Offset="1.0" />
      
  
  LinearGradientBrush>
    
   
   Rectangle.Fill>
  
    
    Rectangle>
  
     
     
 <Rectangle Width="140" Height="70" Canvas.Left="300" Canvas.Top="10">
    <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
        <GradientStop Color="Blue" Offset="0.0" />
        <GradientStop Color="LimeGreen" Offset="1.0" />
      
     
     LinearGradientBrush>
    
      
      Rectangle.Fill>
   
       Rectangle>  
         <Rectangle Width="140" Height="70" Canvas.Left="450" 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>  
           Canvas>  
            UserControl>

执行效果

其中的一些属性说明

Offset 渐变停止点在渐变向量中的位置。值 0.0 指定停止点位于渐变向量的开始处；而值 1.0 指定停止点位于渐变向量的末尾处。如果没有设置这个值，则默认是0.0。

径向渐变刷子（RadialGradientBrush）

焦点定义渐变的开始，而圆定义渐变的终点。

范例代码：


  
  
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <RadialGradientBrush 
      GradientOrigin="0.5,0.5" Center="0.5,0.5" 
      RadiusX="0.5" RadiusY="0.5">
      <GradientStop Color="Yellow" Offset="0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1" />
    
  
  RadialGradientBrush>
  
   
   Rectangle.Fill>

    
    Rectangle>

效果图如下：

径向渐变中的渐变停止点

其中一些属性的意思如下

GradientOrigin ：定义渐变开始的二维焦点的位置。（下面演示图中的红点），可以在径向渐变最外面的圆外面，渐变的二维焦点的位置。默认值为 (0.5, 0.5)。

Center ：径向渐变最外面的圆的圆心，渐变圆的默认中心点位置是 (0.5, 0.5)。

RadiusX：径向渐变最外面的圆的水平半径，默认值为 0.5。

RadiusY：径向渐变最外面的圆的垂直半径，默认值为 0.5。

注意，上面坐标系是相对于边界框的：0 表示边界框的 0%，1 表示边界框的 100%。可以通过将 MappingMode 属性设置为值 Absolute 来更改此坐标系。绝对坐标系不是相对于边界框的。值直接在本地坐标系中解释。

我们可以看下面的例子来理解具有不同 GradientOrigin、Center、RadiusX 和 RadiusY 设置的 RadialGradientBrush。

RadialGradientBrush 设置

图像绘制刷子（ImageBrush）

实例代码：

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Class="SilverlightStudy.MainPage"
	Width="640" Height="480">
<Canvas>
  <Rectangle Height="180" Width="90" Canvas.Left="110" Canvas.Top="36"
      Stroke="Bisque" StrokeThickness="1">
    <Rectangle.Fill>
      <ImageBrush ImageSource="7116_2004321149418456.jpg" Stretch="Uniform"/>
    
  
  Rectangle.Fill>
  
   
   Rectangle>
  
    
    Canvas>

     
     UserControl>