Silverlight通用绘图属性

不透明度属性（Opacity）

Opacity属性用于指定刷子的不透明度。
Opacity 属性的值以 0.0 和 1.0 之间的值表示。默认情况下元素的 Opacity 属性为 1.0。
如果 Opacity 值为 0，则表示画笔完全透明；如果值为 1，则表示画笔完全不透明。
如果值为 0.5，则表示画笔的不透明度为 50%；如果值为 0.725，则表示画笔的不透明度为 72.5%，
依此类推。小于 0 的值将被视为 0，而大于 1 的值将被视为 1。

如下图的代码所示：

1. <Canvas> 
2.   <Rectangle Height="100" Width="150" Canvas.Left="30" Canvas.Top="30" 
3.       Stroke="Black" StrokeThickness="1" Fill="SkyBlue"> 
4.   </Rectangle> 
5.   <Rectangle Height="100" Width="150" Canvas.Left="100" Canvas.Top="50" 
6.       Stroke="Black" StrokeThickness="1" Fill="SkyBlue" Opacity="0.5"> 
7.   </Rectangle> 
8. </Canvas> 

演示效果为：

左上角矩形不透明度为默认的1，右下角矩形的不透明度为50%，所以重叠部分可以看到左上角的矩形。

不透明蒙板（OpacityMask）
有时候，我们对透明度的要求更复杂，并不是希望整个图像都是一个固定的不透明度，这时候就要用到半透明蒙板了。
如下图所示： 我们对一副荷花图片使用不透明蒙板，就可以让荷花图片出现部分区域显示，部分区域不显示的效果。

一段演示Xaml代码如下：

1. <Canvas> 
2.   <Rectangle Height="100" Width="150" Canvas.Left="30" Canvas.Top="30" 
3.       Stroke="Azure" StrokeThickness="1" Fill="SeaGreen"> 
4.       <Rectangle.OpacityMask> 
5.         <LinearGradientBrush> 
6.             <GradientStop Offset="0.56" Color="#00000000" /> 
7.             <GradientStop Offset="0.25" Color="#FF000000" /> 
8.         </LinearGradientBrush> 
9.       </Rectangle.OpacityMask> 
10.   </Rectangle> 
11. </Canvas> 

演示效果如下图：

这里当然也可以是可以使用 前一篇中提到的 径向渐变刷子（RadialGradientBrush）。如下面例子：

1. <Canvas> 
2.   <Rectangle Height="100" Width="150" Canvas.Left="30" Canvas.Top="30" 
3.       Stroke="Azure" StrokeThickness="1" Fill="SeaGreen"> 
4.       <Rectangle.OpacityMask> 
5.           <RadialGradientBrush GradientOrigin="0.7,0.5" Center="0.5,0.5"  
6.                 RadiusX="0.5" RadiusY="0.4"> 
7.                 <GradientStop Color="#00000000" Offset="0" /> 
8.                 <GradientStop Color="#FF000000" Offset="1" /> 
9.         </RadialGradientBrush> 
10.       </Rectangle.OpacityMask> 
11.   </Rectangle> 
12. </Canvas> 

执行效果如下图：

修剪图像(Clip)

有时候我们希望把一个图像作部分修剪，比如下面一副荷花的照片，我们希望修剪成椭圆形。

(带有椭圆型的剪辑区域的图像)

它的剪切代码如下：

1. <Image  
2.   Source="sampleImages\Waterlilies.jpg"  
3.   Width="200" Height="150" HorizontalAlignment="Left"> 
4.   <Image.Clip> 
5.     <EllipseGeometry 
6.       RadiusX="100" 
7.       RadiusY="75" 
8.       Center="100,75"/> 
9.   </Image.Clip> 
10. </Image> 

当然除了 EllipseGeometry（椭圆剪切类）， 我们还可以使用其它剪切类，比如下面的 RectangleGeometry

1. <Canvas> 
2. <Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30" Stroke="Black" StrokeThickness="10" Fill="SlateBlue"> 
3. <Ellipse.Clip> 
4. <RectangleGeometry Rect="0,0,100,100"/> 
5. </Ellipse.Clip> 
6. </Ellipse> 
7. </Canvas> 

上述代码执行效果：

注意，剪切是取得两个的重叠部分。

上面代码我们可以看到是通过设置Geometry的子类来做实现剪切的， Geometry 的子类如下：

1. System.Object 
2.   System.Windows.Threading.DispatcherObject 
3.     System.Windows.DependencyObject 
4.       System.Windows.Freezable 
5.         System.Windows.Media.Animation.Animatable 
6.           System.Windows.Media.Geometry 
7.             System.Windows.Media.CombinedGeometry 
8.             System.Windows.Media.EllipseGeometry 
9.             System.Windows.Media.GeometryGroup 
10.             System.Windows.Media.LineGeometry 
11.             System.Windows.Media.PathGeometry 
12.             System.Windows.Media.RectangleGeometry 
13.             System.Windows.Media.StreamGeometry 

图像变形

所有的UI元素都可以变形，包括以下几种变形：

旋转变形（RotateTransform）： 根据特定的角度进行物体旋转；
倾斜变形（SkewTransform）：根据指定的x-y刻度进行倾斜；
刻度变形（ScaleTransform）：根据横向和纵向进行放大和缩小；
翻转变形（TranslateTransform）： 水平或横向移动物体；
旋转变形（RotateTransform）

在 二维 x-y 坐标系内围绕指定点按照顺时针方向旋转对象。

演示代码：

1. <Canvas> 
2. <Rectangle Height="100" Width="100" Canvas.Left="70" Canvas.Top="10" Fill="Black"> 
3.     <Rectangle.RenderTransform> 
4.         <RotateTransform Angle="27" /> 
5.     </Rectangle.RenderTransform> 
6. </Rectangle> 
7. </Canvas> 

演示效果：

倾斜变形（SkewTransform）

二维扭曲

演示代码

1. <Canvas> 
2. <Rectangle Height="100" Width="100" Canvas.Left="70" Canvas.Top="10"  
3. Fill="Red"> 
4.     <Rectangle.RenderTransform> 
5.         <SkewTransform AngleX="15" /> 
6.     </Rectangle.RenderTransform> 
7. </Rectangle> 
8. </Canvas> 

演示效果

刻度变形（ScaleTransform）

在 二维 x-y 坐标系内缩放对象。

演示代码

1. <Canvas> 
2. <Rectangle Height="100" Width="100" Canvas.Left="70" Canvas.Top="10"  
3. Fill="Red"> 
4.     <Rectangle.RenderTransform> 
5.         <ScaleTransform ScaleX="1.3" ScaleY=".5" /> 
6.     </Rectangle.RenderTransform> 
7. </Rectangle> 
8. </Canvas> 

演示效果

翻转变形（TranslateTransform）

在 二维 x-y 坐标系中平移（移动）对象。

演示代码

1. <Canvas> 
2. <Rectangle Height="50" Width="50"  
3.   Fill="#CCCCCCFF" Stroke="Blue" StrokeThickness="2" 
4.   Canvas.Left="100" Canvas.Top="100"> 
5.   <Rectangle.RenderTransform> 
6.     <TranslateTransform X="50" Y="50" /> 
7.   </Rectangle.RenderTransform> 
8. </Rectangle> 
9. </Canvas> 

由于是位移，演示效果截图会不明显，就不提供演示效果图了。


组合应用

我们当然可以把上面的变形组合应用，比如下面的例子

演示代码

1. <Canvas> 
2. <Rectangle Height="100" Width="100" Canvas.Left="70" Canvas.Top="10"  
3. Fill="Green"> 
4.     <Rectangle.RenderTransform> 
5.         <TransformGroup> 
6.         <RotateTransform Angle="45" /> 
7.         <ScaleTransform ScaleX=".5" ScaleY="1.2" /> 
8.         <SkewTransform AngleX="30"/> 
9.         </TransformGroup> 
10.     </Rectangle.RenderTransform> 
11. </Rectangle> 
12. </Canvas> 

演示效果