Silverlight形状、画笔、变换、图像处理、几何图形

 1 <UserControl x:Class="SharpStudy.MainPage"
 2     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 5     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 6     mc:Ignorable="d"
 7     d:DesignHeight="300" d:DesignWidth="400">
 8 
 9     <!--
10          Sharp相关知识
11          (1)Shape 是一种允许您在屏幕中绘制形状的 UIElement 类型。由于它们是用户界面 (UI) 元素，因此 Shape 对象可以在各种容器对象（如 Grid 和 Canvas）中使用
12          (2)Shape对象包括: Ellipse、Line、Path、Polygon、Polyline 和 Rectangle
13          (3)公用属性：
14               Stroke ：说明如何绘制形状的轮廓。
15               StrokeThickness ：说明形状轮廓的粗细。
16               Fill ：说明如何绘制形状的内部。
17               用于指定坐标和顶点的数据属性，以与设备无关的像素来度量。
18          （4）虽然 Line 类提供了 Fill 属性，但设置该属性无效，因为 Line 没有区域。
19          （5）画笔属性的有效输入可以是关键字或十六进制颜色值
20          （6）用属性元素语法显式创建一个 SolidColorBrush 对象
21 
22         -->
23     <Canvas Width="300" Height="300" Background="LightGray">
24         <Ellipse
25                 Canvas.Top="50"
26                 Canvas.Left="50"
27                 Fill="#FFFFFF00"
28                 Height="75"
29                 Width="75"
30                 StrokeThickness="5"
31                 Stroke="#FF0000FF"
32             />
33     </Canvas>
34     <!--
35     用属性元素语法显式创建一个 SolidColorBrush 对象
36     <Canvas>
37         <Polygon
38     Points="300,200 400,125 400,275 300,200"
39     Stroke="Purple"
40     StrokeThickness="2">
41             <Polygon.Fill>
42                 <SolidColorBrush Color="Blue" Opacity="0.4"/>
43             </Polygon.Fill>
44         </Polygon>
45 
46     </Canvas>
47     -->
48 </UserControl>

 1 <UserControl x:Class="SharpStudy.BrushDemo"
 2     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 5     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 6     mc:Ignorable="d"
 7     d:DesignHeight="300" d:DesignWidth="400">
 8     
 9     <!--
10     （一） 画笔作用： 可以使用 Silverlight 画笔对象以纯色、线性渐变、径向渐变和图像进行绘制
11     （二） 画笔分类：
12          （1）SolidColorBrush（纯色画笔 ）
13          （2）LinearGradientBrush（线性渐变画笔）：使用沿一条直线（即"渐变轴"）定义的渐变来绘制区域 ，渐变轴是一条直线
14               渐变停止点（GradientStop）：描述渐变中过渡点的位置（Offset）和颜色(Color)。
15                             渐变停止点的 Color 属性指定渐变停止点的颜色
16                             渐变停止点的 Offset 属性指定渐变停止点的颜色在渐变轴上的位置。偏移量是一个范围从 0 至 1 的 Double 值。
17                              由于渐变停止点不提供 opacity 属性，因此必须使用 ARGB 十六进制表示法或 ScRGB 表示法来指定颜色的 alpha 通道，
18                              以创建透明或部分透明的渐变停止点（例如：<GradientStop Color="#200000FF" Offset="0.0" />）
19              渐变轴:线性渐变画笔的渐变停止点位于一条直线上,这条线就是渐变轴
20                              StartPoint 和 EndPoint 属性更改直线的方向和大小，
21                              通过操作画笔的 StartPoint 和 EndPoint，可以创建水平和垂直渐变、反转渐变方向以及压缩渐变的范围等
22                              默认情况点 (0,0) 表示绘制区域的左上角，(1,1) 表示绘制区域的右下角，你可以调整两个点如(0.5,0.7)和(0.4,0.8)  
23          （3）RadialGradientBrush（径向渐变画笔）:渐变轴由一个圆圈定义,其颜色从圆圈的原点向外辐射。
24                              GradientOrigin 指定径向渐变画笔的渐变轴的起点。渐变轴从渐变原点辐射至渐变圆。
25                              画笔的渐变圆由其 Center、RadiusX 和 RadiusY 属性定义。
26          （4）ImageBrush（图像画笔） ：持您将图像用作填充、背景和轮廓
27                             ImageSource属性：指定的JPEG或PNG图像
28                             Stretch 属性： Fill（默认） None、Uniform 、UniformToFill 来更改绘制的区域行为。
29           (5)VideoBrush（视频画笔）: 使用视频绘制一个区域
30                           由于 VideoBrush 依赖 MediaElement 对象来提供视频流，您应该了解如何创建 MediaElement 并使用它打开媒体文件
31                           若要使用视频绘制一个区域，需要创建一个 MediaElement 和一个 VideoBrush，并将该 VideoBrush 应用到要绘制的对象
32                           IsMuted属性:获取或设置一个值，该值指示是否已静音
33                           SourceName属性 ：提供画笔视频的 MediaElement 的名称。
34 
35 
36     -->
37     <StackPanel>
38         <!--线性渐变画笔-->
39         <Rectangle Width="200" Height="100">
40             <Rectangle.Fill>
41                 <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
42                     <GradientStop Color="Yellow" Offset="0.0" />
43                     <GradientStop Color="Red" Offset="0.25" />
44                     <GradientStop Color="Blue" Offset="0.75" />
45                     <GradientStop Color="LimeGreen" Offset="1.0" />
46                 </LinearGradientBrush>
47             </Rectangle.Fill>
48         </Rectangle>
49         <!--径向渐变画笔-->
50         <Rectangle Width="200" Height="100">
51             <Rectangle.Fill>
52                 <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5"
53                                      
54         RadiusX="0.5" RadiusY="0.5">
55                     <GradientStop Color="Yellow" Offset="0" />
56                     <GradientStop Color="Red" Offset="0.25" />
57                     <GradientStop Color="Blue" Offset="0.75" />
58                     <GradientStop Color="LimeGreen" Offset="1" />
59                 </RadialGradientBrush>
60             </Rectangle.Fill>
61         </Rectangle>
62         <!--图像画笔-->
63         <Rectangle Width="200" Height="100">
64             <Rectangle.Fill>
65                 <ImageBrush ImageSource="/SharpStudy;component/Transformer.png"  Stretch="UniformToFill"/>
66             </Rectangle.Fill>
67         </Rectangle>
68         <!--视频画笔-->
69         <Canvas>
70             <MediaElement x:Name="butterflyMediaElement"   Source="Wildlife.wmv" IsMuted="True"    Opacity="0.0" IsHitTestVisible="False" />
71         <TextBlock   Canvas.Left="33"   Canvas.Top="41" FontFamily="Verdana" FontSize="200" FontWeight="Bold" TextWrapping="Wrap" Text="Video"  >   
72             <TextBlock.Foreground>
73                 <VideoBrush SourceName="butterflyMediaElement" Stretch="Fill"  />
74             </TextBlock.Foreground>
75         </TextBlock>
76         </Canvas>
77     </StackPanel>
78 </UserControl>

 1 <UserControl x:Class="GeometryStudy.MainPage"
 2     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 5     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 6     mc:Ignorable="d"
 7     d:DesignHeight="300" d:DesignWidth="400" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
 8     <!--
 9     (一)（1）Silverlight 中使用二维 (2-D) Transform 类来旋转、按比例缩放、扭曲和移动（平移）对象
10         (2)Transform定义如何将一个坐标空间中的点映射或变换到另一个坐标空间。此映射由变换 Matrix（一个三行三列的 Double 值集合）
11     (二)变换的分类：
12        简单变换：
13        （1）RotateTransform变换：按指定的 Angle 旋转元素
14        （2）ScaleTransform变换：按指定的 ScaleX 和 ScaleY 量按比例缩放元素
15        （3）SkewTransform变换：按指定的 AngleX 和 AngleY 量扭曲元素。
16        （4）TranslateTransform：按指定的 X 和 Y 量移动（平移）元素。
17       复杂变换：
18         （1）CompositeTransform：使用此类对同一对象应用多个变换（如扭曲和旋转）。此类以首选顺序应用多个变换
19          （2）TransformGroup ：与CompositeTransform类似，但以特定顺序应用变换，或者希望为不同变换应用不同的中心点
20          （3）MatrixTransform ：提供的自定义变换，直接处理矩阵
21     （三）常见变换属性
22           （1）Brush类可以进行 Transform ,RelativeTransform变换
23           （2）Geometry 可以Transform 
24            (3)UIElement可以RenderTransform 
25     -->
26 
27     <Grid x:Name="LayoutRoot" Background="White">
28         <Grid.RowDefinitions>
29             <RowDefinition Height="Auto"></RowDefinition>
30             <RowDefinition Height="Auto"></RowDefinition>
31         </Grid.RowDefinitions>
32        
33         <StackPanel Grid.Row="0">
34             <!--以顶点作为旋转点旋转45度-->
35             <Rectangle Width="50" Height="50" Fill="RoyalBlue" Margin="0,0,0,20">
36                 <Rectangle.RenderTransform>
37                     <RotateTransform Angle="45" />
38                 </Rectangle.RenderTransform>
39             </Rectangle>
40             <!--正方形中心作为旋转点旋转45度-->
41             <Rectangle Width="50" Height="50" Fill="RoyalBlue">
42                 <Rectangle.RenderTransform>
43                     <RotateTransform Angle="45" CenterX="25" CenterY="25" />
44                 </Rectangle.RenderTransform>
45             </Rectangle>
46         </StackPanel>
47         <!--旋转动画-->
48         <StackPanel Grid.Row="1" >
49             <StackPanel.Resources>
50                 <Storyboard x:Name="myStoryboard">
51                     <DoubleAnimation 
52                         Storyboard.TargetName="myTransform" 
53                         Storyboard.TargetProperty="Angle"
54                         From="0" To="360" Duration="0:0:5" 
55                         RepeatBehavior="Forever" 
56                      />
57                 </Storyboard>
58             </StackPanel.Resources>
59             <Rectangle Width="50" Height="50" Fill="RoyalBlue" MouseLeftButtonDown="StartAnimation">
60                 <Rectangle.RenderTransform>
61                     <RotateTransform x:Name="myTransform" Angle="45" CenterX="25" CenterY="25" />
62                 </Rectangle.RenderTransform>
63             </Rectangle>
64         </StackPanel>
65     </Grid>
66 </UserControl>

 1 <UserControl x:Class="ImageDemo.MainPage"
 2     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 5     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 6     mc:Ignorable="d"
 7     d:DesignHeight="300" d:DesignWidth="400" FontFamily="Comic Sans MS">
 8     
 9     <!--
10        图像处理
11        (一)裁切图像
12         (1)可以通过使用 Clip 属性裁切掉图像输出的某个区域来裁切图像
13       （二）透明遮罩
14         OpacityMask(透明遮罩):获取或设置用于改变此对象区域的不透明度的画笔。根据渐变画刷的范围产生渐变透明效果
15       （三）使用mageBrush 来使用图像绘制采用画笔的区域
16       （四）DeepZoom:实现对大型图像或高分辨率图像的集合的缩放和平移
17             (1)探究非常大或高分辨率图像
18             (2)三维摄影：拍摄某一房间的照片，连续拍摄将创建构成该房间的 360 度画面的照片的集合
19             (3)广告：您可以创建分辨率相对较低的图像以表达广告的整个主题，然后，逐渐增加更高分辨率的图像以容纳加深用户印象的效果以及与产品有关的数据。
20      （五）WriteableBitmap:使用 WriteableBitmap 类基于每个框架来更新和呈现位图
21     -->
22     <Grid x:Name="LayoutRoot" Background="White">
23         <StackPanel>
24          <!--裁剪-->   
25         <Image   Width="200" Height="150" Source="/ImageDemo;component/WelcomeScan.jpg">
26             <Image.Clip>
27                 <EllipseGeometry RadiusX="100" RadiusY="75" Center="100,75"/>
28             </Image.Clip>
29         </Image>  
30          <!--透明遮罩（另一种裁剪方法）-->   
31         <Image  Source="/ImageDemo;component/WelcomeScan.jpg" Stretch="None" Width="400" Height="200">               
32               <Image.OpacityMask >    
33                  <!--使用放射性渐变画刷-->
34                 <RadialGradientBrush Center="200,100"  GradientOrigin="200,100" MappingMode="Absolute" RadiusX="200"  RadiusY="100">
35                     <GradientStop Color="#00000000" Offset="1" />                   
36                     <GradientStop Color="#FF000000" Offset="0" />
37                 </RadialGradientBrush>
38             </Image.OpacityMask>
39         </Image>
40 
41             <!--
42         使用mageBrush 来使用图像绘制采用画笔的区域
43         ImageBrush 可用于 Canvas 或 InkPresenter 的 Background 属性的值
44         下面的 XAML 示例显示如何将 Foreground 属性设置为 ImageBrush，其图像将用作 TextBlock 呈现文本的填充。
45         -->
46         <TextBlock FontFamily="Verdana" FontSize="72" HorizontalAlignment="Center" FontStyle="Normal" FontWeight="Bold" Text="Sililverlight图像学习">    
47             <TextBlock.Foreground>
48                 <ImageBrush ImageSource="/ImageDemo;component/WelcomeScan.jpg"/>
49             </TextBlock.Foreground>
50         </TextBlock>
51         </StackPanel>
52     </Grid>
53 
54 </UserControl>

 1 <UserControl x:Class="SharpStudy.GeometryDemo"
 2     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 5     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 6     mc:Ignorable="d"
 7     d:DesignHeight="300" d:DesignWidth="400">
 8     <!--
 9     
10     (一)Geometry 对象可以用于描绘二维 (2-D) 形状的几何图形
11    （二）Geometry 与 Shape 的比较
12         （1）相似点：描绘二维形状
13         （2）不同点：
14                      Shape对象是UIElement（所以具有UIElement具有的 Opacity、OpacityMask等属性） 
15                      通过使用 Geometry 设置 Path 的 Data 属性以及设置它的 Fill 和 Stroke 属性，可以呈现 Geometry。
16     （三）Geometry 对象分类：
17           简单几何图形：
18                       （1）LineGeometry：过指定直线的起点（StartPoint）和终点（EndPoint）来定义  
19                       （2）RectangleGeometry 通过使用 Rect 结构来定义。RadiusX 和 RadiusY 属性来创建圆角矩形。
20                       （3）EllipseGeometry 通过中心点(Center)、x 半径( RadiusX)和 y 半径(RadiusY)来定义。
21           路径几何图形:PathGeometry 对象和几何图形 mini-language 提供了描绘由弧线、曲线和直线组成的多个复杂图形的方法。
22                        
23           复合几何图形:可以使用 GeometryGroup 对象来创建复合几何图形对象。GeometryGroup 创建它所包含的 Geometry 对象的组合体，但不合并其面积
24     
25 
26              
27     -->
28     <StackPanel Orientation="Horizontal">
29         <!--简单几何图形-->
30         <!--LineGeometry-->
31         <Canvas>
32             <Path Stroke="Black" StrokeThickness="1" >
33                 <Path.Data>
34                     <LineGeometry StartPoint="10,20" EndPoint="100,130" />
35                 </Path.Data>
36             </Path>
37         </Canvas>
38         <!--EllipseGeometry-->
39         <Canvas>
40             <Path Fill="Gold" Stroke="Black" StrokeThickness="1">
41                 <Path.Data>
42                     <EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50" />
43                 </Path.Data>
44             </Path>
45         </Canvas>
46         <!--RectangleGeometry-->
47         <Canvas>
48             <Path Fill="LemonChiffon" Stroke="Black" StrokeThickness="1">
49                 <Path.Data>
50                     <RectangleGeometry Rect="50,50,25,25" RadiusX="10" RadiusY="10" />
51                 </Path.Data>
52             </Path>
53         </Canvas>
54 
55         <!--
56         路径几何图形
57         （1）PathGeometry 的核心是 PathFigure 对象的集合；这些对象之所以这样命名是因为每个图形都描绘 PathGeometry 中的一个离散形状
58         （2） 每个 PathFigure 自身又由一个或多个 PathSegment 对象组成，每个这样的对象均描绘图形的一条线段。
59         （3）路径标记语法：Geometry 对象支持使用一系列特殊的移动和绘制命令的 XAML 属性语法
60         -->  
61         <Canvas>
62             <Path Stroke="Black" StrokeThickness="1">
63                 <Path.Data>
64                     <PathGeometry>
65                         <PathGeometry.Figures>
66                             <PathFigure StartPoint="10,20">
67                                 <PathFigure.Segments>
68                                     <LineSegment Point="100,130"/>
69                                 </PathFigure.Segments>
70                             </PathFigure>
71                         </PathGeometry.Figures>
72                     </PathGeometry>
73                 </Path.Data>
74             </Path>
75         </Canvas>
76        <!--
77           复合几何图形
78         -->
79         <Canvas>
80             <Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
81                 <Path.Data>
82 
83                     <!-- Creates a composite shape from three geometries. -->
84                     <GeometryGroup FillRule="EvenOdd">
85                         <LineGeometry StartPoint="10,10" EndPoint="50,30" />
86                         <EllipseGeometry Center="40,70" RadiusX="30" RadiusY="30" />
87                         <RectangleGeometry Rect="30,55 100 30" />
88                     </GeometryGroup>
89                 </Path.Data>
90             </Path>
91         </Canvas>
92 
93     </StackPanel>
94 </UserControl>