Silverlight形状、画笔、变换、图像处理、几何图形
1.形状（Ellipse、Line、Path、Polygon、Polyline 和 Rectangle）
<UserControl x:Class="SharpStudy.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="" d:DesignWidth=""> <!--
Sharp相关知识
()Shape 是一种允许您在屏幕中绘制形状的 UIElement 类型。由于它们是用户界面 (UI) 元素，因此 Shape 对象可以在各种容器对象（如 Grid 和 Canvas）中使用
()Shape对象包括: Ellipse、Line、Path、Polygon、Polyline 和 Rectangle
()公用属性：
Stroke ：说明如何绘制形状的轮廓。
StrokeThickness ：说明形状轮廓的粗细。
Fill ：说明如何绘制形状的内部。
用于指定坐标和顶点的数据属性，以与设备无关的像素来度量。
（）虽然 Line 类提供了 Fill 属性，但设置该属性无效，因为 Line 没有区域。
（）画笔属性的有效输入可以是关键字或十六进制颜色值
（）用属性元素语法显式创建一个 SolidColorBrush 对象 -->
<Canvas Width="" Height="" Background="LightGray">
<Ellipse
Canvas.Top=""
Canvas.Left=""
Fill="#FFFFFF00"
Height=""
Width=""
StrokeThickness=""
Stroke="#FF0000FF"
/>
</Canvas>
<!--
用属性元素语法显式创建一个 SolidColorBrush 对象
<Canvas>
<Polygon
Points="300,200 400,125 400,275 300,200"
Stroke="Purple"
StrokeThickness="">
<Polygon.Fill>
<SolidColorBrush Color="Blue" Opacity="0.4"/>
</Polygon.Fill>
</Polygon> </Canvas>
-->
</UserControl>
2.画笔：（SolidColorBrush（纯色画笔 ）、LinearGradientBrush（线性渐变画笔）、RadialGradientBrush（径向渐变画笔）、ImageBrush（图像画笔）、VideoBrush（视频画笔））
<UserControl x:Class="SharpStudy.BrushDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="" d:DesignWidth=""> <!--
（一） 画笔作用： 可以使用 Silverlight 画笔对象以纯色、线性渐变、径向渐变和图像进行绘制
（二） 画笔分类：
（）SolidColorBrush（纯色画笔 ）
（）LinearGradientBrush（线性渐变画笔）：使用沿一条直线（即"渐变轴"）定义的渐变来绘制区域 ，渐变轴是一条直线
渐变停止点（GradientStop）：描述渐变中过渡点的位置（Offset）和颜色(Color)。
渐变停止点的 Color 属性指定渐变停止点的颜色
渐变停止点的 Offset 属性指定渐变停止点的颜色在渐变轴上的位置。偏移量是一个范围从 至 的 Double 值。
由于渐变停止点不提供 opacity 属性，因此必须使用 ARGB 十六进制表示法或 ScRGB 表示法来指定颜色的 alpha 通道，
以创建透明或部分透明的渐变停止点（例如：<GradientStop Color="#200000FF" Offset="0.0" />）
渐变轴:线性渐变画笔的渐变停止点位于一条直线上,这条线就是渐变轴
StartPoint 和 EndPoint 属性更改直线的方向和大小，
通过操作画笔的 StartPoint 和 EndPoint，可以创建水平和垂直渐变、反转渐变方向以及压缩渐变的范围等
默认情况点 (,) 表示绘制区域的左上角，(,) 表示绘制区域的右下角，你可以调整两个点如(0.5,0.7)和(0.4,0.8)
（）RadialGradientBrush（径向渐变画笔）:渐变轴由一个圆圈定义,其颜色从圆圈的原点向外辐射。
GradientOrigin 指定径向渐变画笔的渐变轴的起点。渐变轴从渐变原点辐射至渐变圆。
画笔的渐变圆由其 Center、RadiusX 和 RadiusY 属性定义。
（）ImageBrush（图像画笔） ：持您将图像用作填充、背景和轮廓
ImageSource属性：指定的JPEG或PNG图像
Stretch 属性： Fill（默认） None、Uniform 、UniformToFill 来更改绘制的区域行为。
()VideoBrush（视频画笔）: 使用视频绘制一个区域
由于 VideoBrush 依赖 MediaElement 对象来提供视频流，您应该了解如何创建 MediaElement 并使用它打开媒体文件
若要使用视频绘制一个区域，需要创建一个 MediaElement 和一个 VideoBrush，并将该 VideoBrush 应用到要绘制的对象
IsMuted属性:获取或设置一个值，该值指示是否已静音
SourceName属性 ：提供画笔视频的 MediaElement 的名称。 -->
<StackPanel>
<!--线性渐变画笔-->
<Rectangle Width="" Height="">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<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="" Height="">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
<GradientStop Color="Yellow" Offset="" />
<GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" />
<GradientStop Color="LimeGreen" Offset="" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!--图像画笔-->
<Rectangle Width="" Height="">
<Rectangle.Fill>
<ImageBrush ImageSource="/SharpStudy;component/Transformer.png" Stretch="UniformToFill"/>
</Rectangle.Fill>
</Rectangle>
<!--视频画笔-->
<Canvas>
<MediaElement x:Name="butterflyMediaElement" Source="Wildlife.wmv" IsMuted="True" Opacity="0.0" IsHitTestVisible="False" />
<TextBlock Canvas.Left="" Canvas.Top="" FontFamily="Verdana" FontSize="" FontWeight="Bold" TextWrapping="Wrap" Text="Video" >
<TextBlock.Foreground>
<VideoBrush SourceName="butterflyMediaElement" Stretch="Fill" />
</TextBlock.Foreground>
</TextBlock>
</Canvas>
</StackPanel>
</UserControl>
3.变换：RotateTransform（旋转）、ScaleTransform（缩放）、SkewTransform（倾斜）、TranslateTransform（平移）、CompositeTransform（通用变换）、TransformGroup（类似通用变换）、MatrixTransform（矩阵）
<UserControl x:Class="GeometryStudy.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="" d:DesignWidth="" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
<!--
(一)（）Silverlight 中使用二维 (-D) Transform 类来旋转、按比例缩放、扭曲和移动（平移）对象
()Transform定义如何将一个坐标空间中的点映射或变换到另一个坐标空间。此映射由变换 Matrix（一个三行三列的 Double 值集合）
(二)变换的分类：
简单变换：
（）RotateTransform变换：按指定的 Angle 旋转元素
（）ScaleTransform变换：按指定的 ScaleX 和 ScaleY 量按比例缩放元素
（）SkewTransform变换：按指定的 AngleX 和 AngleY 量扭曲元素。
（）TranslateTransform：按指定的 X 和 Y 量移动（平移）元素。
复杂变换：
（）CompositeTransform：使用此类对同一对象应用多个变换（如扭曲和旋转）。此类以首选顺序应用多个变换
（）TransformGroup ：与CompositeTransform类似，但以特定顺序应用变换，或者希望为不同变换应用不同的中心点
（）MatrixTransform ：提供的自定义变换，直接处理矩阵
（三）常见变换属性
（）Brush类可以进行 Transform ,RelativeTransform变换
（）Geometry 可以Transform
()UIElement可以RenderTransform
--> <Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions> <StackPanel Grid.Row="">
<!--以顶点作为旋转点旋转45度-->
<Rectangle Width="" Height="" Fill="RoyalBlue" Margin="0,0,0,20">
<Rectangle.RenderTransform>
<RotateTransform Angle="" />
</Rectangle.RenderTransform>
</Rectangle>
<!--正方形中心作为旋转点旋转45度-->
<Rectangle Width="" Height="" Fill="RoyalBlue">
<Rectangle.RenderTransform>
<RotateTransform Angle="" CenterX="" CenterY="" />
</Rectangle.RenderTransform>
</Rectangle>
</StackPanel>
<!--旋转动画-->
<StackPanel Grid.Row="" >
<StackPanel.Resources>
<Storyboard x:Name="myStoryboard">
<DoubleAnimation
Storyboard.TargetName="myTransform"
Storyboard.TargetProperty="Angle"
From="" To="" Duration="0:0:5"
RepeatBehavior="Forever"
/>
</Storyboard>
</StackPanel.Resources>
<Rectangle Width="" Height="" Fill="RoyalBlue" MouseLeftButtonDown="StartAnimation">
<Rectangle.RenderTransform>
<RotateTransform x:Name="myTransform" Angle="" CenterX="" CenterY="" />
</Rectangle.RenderTransform>
</Rectangle>
</StackPanel>
</Grid>
</UserControl>
4.图形：Clip（裁切）、OpacityMask(透明遮罩)、ImageBrush（图形画刷）、DeepZoom
<UserControl x:Class="ImageDemo.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="" d:DesignWidth="" FontFamily="Comic Sans MS"> <!--
图像处理
(一)裁切图像
()可以通过使用 Clip 属性裁切掉图像输出的某个区域来裁切图像
（二）透明遮罩
OpacityMask(透明遮罩):获取或设置用于改变此对象区域的不透明度的画笔。根据渐变画刷的范围产生渐变透明效果
（三）使用mageBrush 来使用图像绘制采用画笔的区域
（四）DeepZoom:实现对大型图像或高分辨率图像的集合的缩放和平移
()探究非常大或高分辨率图像
()三维摄影：拍摄某一房间的照片，连续拍摄将创建构成该房间的 度画面的照片的集合
()广告：您可以创建分辨率相对较低的图像以表达广告的整个主题，然后，逐渐增加更高分辨率的图像以容纳加深用户印象的效果以及与产品有关的数据。
（五）WriteableBitmap:使用 WriteableBitmap 类基于每个框架来更新和呈现位图
-->
<Grid x:Name="LayoutRoot" Background="White">
<StackPanel>
<!--裁剪-->
<Image Width="" Height="" Source="/ImageDemo;component/WelcomeScan.jpg">
<Image.Clip>
<EllipseGeometry RadiusX="" RadiusY="" Center="100,75"/>
</Image.Clip>
</Image>
<!--透明遮罩（另一种裁剪方法）-->
<Image Source="/ImageDemo;component/WelcomeScan.jpg" Stretch="None" Width="" Height="">
<Image.OpacityMask >
<!--使用放射性渐变画刷-->
<RadialGradientBrush Center="200,100" GradientOrigin="200,100" MappingMode="Absolute" RadiusX="" RadiusY="">
<GradientStop Color="#00000000" Offset="" />
<GradientStop Color="#FF000000" Offset="" />
</RadialGradientBrush>
</Image.OpacityMask>
</Image> <!--
使用mageBrush 来使用图像绘制采用画笔的区域
ImageBrush 可用于 Canvas 或 InkPresenter 的 Background 属性的值
下面的 XAML 示例显示如何将 Foreground 属性设置为 ImageBrush，其图像将用作 TextBlock 呈现文本的填充。
-->
<TextBlock FontFamily="Verdana" FontSize="" HorizontalAlignment="Center" FontStyle="Normal" FontWeight="Bold" Text="Sililverlight图像学习">
<TextBlock.Foreground>
<ImageBrush ImageSource="/ImageDemo;component/WelcomeScan.jpg"/>
</TextBlock.Foreground>
</TextBlock>
</StackPanel>
</Grid> </UserControl>
5.几何图形：LineGeometry（线条）RectangleGeometry（矩形）EllipseGeometry（圆形）、PathGeometry（路径几何图形）、GeometryGroup（复合几何图形）
<UserControl x:Class="SharpStudy.GeometryDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="" d:DesignWidth="">
<!-- (一)Geometry 对象可以用于描绘二维 (-D) 形状的几何图形
（二）Geometry 与 Shape 的比较
（）相似点：描绘二维形状
（）不同点：
Shape对象是UIElement（所以具有UIElement具有的 Opacity、OpacityMask等属性）
通过使用 Geometry 设置 Path 的 Data 属性以及设置它的 Fill 和 Stroke 属性，可以呈现 Geometry。
（三）Geometry 对象分类：
简单几何图形：
（）LineGeometry：过指定直线的起点（StartPoint）和终点（EndPoint）来定义
（）RectangleGeometry 通过使用 Rect 结构来定义。RadiusX 和 RadiusY 属性来创建圆角矩形。
（）EllipseGeometry 通过中心点(Center)、x 半径( RadiusX)和 y 半径(RadiusY)来定义。
路径几何图形:PathGeometry 对象和几何图形 mini-language 提供了描绘由弧线、曲线和直线组成的多个复杂图形的方法。 复合几何图形:可以使用 GeometryGroup 对象来创建复合几何图形对象。GeometryGroup 创建它所包含的 Geometry 对象的组合体，但不合并其面积 -->
<StackPanel Orientation="Horizontal">
<!--简单几何图形-->
<!--LineGeometry-->
<Canvas>
<Path Stroke="Black" StrokeThickness="" >
<Path.Data>
<LineGeometry StartPoint="10,20" EndPoint="100,130" />
</Path.Data>
</Path>
</Canvas>
<!--EllipseGeometry-->
<Canvas>
<Path Fill="Gold" Stroke="Black" StrokeThickness="">
<Path.Data>
<EllipseGeometry Center="50,50" RadiusX="" RadiusY="" />
</Path.Data>
</Path>
</Canvas>
<!--RectangleGeometry-->
<Canvas>
<Path Fill="LemonChiffon" Stroke="Black" StrokeThickness="">
<Path.Data>
<RectangleGeometry Rect="50,50,25,25" RadiusX="" RadiusY="" />
</Path.Data>
</Path>
</Canvas> <!--
路径几何图形
（）PathGeometry 的核心是 PathFigure 对象的集合；这些对象之所以这样命名是因为每个图形都描绘 PathGeometry 中的一个离散形状
（） 每个 PathFigure 自身又由一个或多个 PathSegment 对象组成，每个这样的对象均描绘图形的一条线段。
（）路径标记语法：Geometry 对象支持使用一系列特殊的移动和绘制命令的 XAML 属性语法
-->
<Canvas>
<Path Stroke="Black" StrokeThickness="">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigure StartPoint="10,20">
<PathFigure.Segments>
<LineSegment Point="100,130"/>
</PathFigure.Segments>
</PathFigure>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
</Canvas>
<!--
复合几何图形
-->
<Canvas>
<Path Stroke="Black" StrokeThickness="" Fill="#CCCCFF">
<Path.Data> <!-- Creates a composite shape from three geometries. -->
<GeometryGroup FillRule="EvenOdd">
<LineGeometry StartPoint="10,10" EndPoint="50,30" />
<EllipseGeometry Center="40,70" RadiusX="" RadiusY="" />
<RectangleGeometry Rect="30,55 100 30" />
</GeometryGroup>
</Path.Data>
</Path>
</Canvas> </StackPanel>
</UserControl>
Silverlight形状、画笔、变换、图像处理、几何图形的更多相关文章
- WPF 10天修炼 第八天 - 形状、画刷和变换
图形 在WPF中使用绘图最简单的就是使用Shape类.Shape类继承自FrameworkElement,是一个专门用来绘图的类.Shape类中年派生的类有直线.矩形.多边形和圆形等. System. ...
- WPF 中的形状和基本绘图概述
本主题概述如何使用 Shape 对象绘图. Shape 是一种允许您在屏幕中绘制形状的 UIElement 类型. 由于它们是 UI 元素,因此 Shape 对象可以在 Panel 元素和大多数控件中 ...
- 学习 opencv---(9)形态学图像处理（一）：膨胀和腐蚀
本篇文章中,我们一起探究了图像处理中,最基本的形态学运算--膨胀与腐蚀.浅墨在文章开头友情提醒,用人物照片做腐蚀和膨胀的素材图片得到的效果会比较惊悚,毁三观的,不建议尝试.......... 一.理论 ...
- 图像处理_imgproc笔记（1）
图像处理_滤波器 (1)图像的平滑处理 图像的平滑也称模糊,平滑处理需要一个滤波器,最常用的滤波器就是线性滤波器,线性滤波器的输出像素值是g(x,y),是输入像素值是 f(x,y)的加权和: ...
- 一步一步学Silverlight 2系列（30）：使用Transform实现更炫的效果（下）
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- Silverlight三维透视+倒影效果
原文:Silverlight三维透视+倒影效果 知识概要: 1.使用2D内容创建3D体验,了解图像的PlaneProjection属性,具体内容读者自己查看文档. 2.Silverlight图形图形的 ...
- opencv6.1-imgproc图像处理模块之平滑与形态学操作
这个部分是<opencv-tutorials.pdf>的部分,这部分也是几大部分中例子最多的,其实这个教程的例子都很不错,不过有些看得出来还是c接口的例子,说明例子有些年头了,其实在&qu ...
- 显示形状回归算法（ESR）代码介绍
源地址:http://www.thinkface.cn/thread-3704-1-6.html 人脸对齐包括两个部分,分别为训练部分和测试部分.所有的代码基于opencv2.0.(一)训练阶段Ste ...
- 一步一步学Silverlight 2系列文章
概述 由TerryLee编写的<Silverlight 2完美征程>一书,已经上市,在该系列文章的基础上补充了大量的内容,敬请关注.官方网站:http://www.dotneteye.cn ...
随机推荐
- .NET开发必备工具之-Reflector
第一步,下载 第二步,解压缩下载的包,双击Reflector应用程序打开 第三步,设置默认程序集,可以不设定 第四步,找到你要反编译dll文件 第五步,把dll文件拷贝到方便的位置(我在桌面上新建了T ...
- JavaScript中数组操作
var arr1=new Array(); arr1.push(1);//在数组的中末尾添加元素,并返回新的长度 arr1.push(2);//在数组的中末尾添加元素,并返回新的长度 arr1.pop ...
- Find the Clones
Find the Clones Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 6365 Accepted: 2375 D ...
- 通用链表实现（参考Linux List）
最近参考Linux实现的通用双向链表时,因typeof并不是标准c规定的关键字,除GCC编译器外其他编译器未必支持typeof关键字,所以在使用上并不能想Linux所实现的链表哪样灵活,它要求将连接器 ...
- 【阿里云产品公测】高大上的搜索服务OpenSearch，你值得拥有！
[阿里云产品公测]高大上的搜索服务OpenSearch,你值得拥有! 作者:阿里云用户trcher 一.前言: 在OpenSearch没出来之前,就一直想给网站做个搜索功能,虽然网站本身自带搜索功 ...
- （Android学习系列）二，窗口(Activity)的生命周期
在Activity从创建到销毁的过程中需要在不同的阶段调用7个生命周期的方法这7个生命周期方法定义如下: protected void onCreate(Bundle savedInstanceSta ...
- 《算法导论》习题解答 Chapter 22.1-5（求平方图）
一.邻接矩阵实现 思路:如果是邻接矩阵存储,设邻接矩阵为A,则A*A即为平方图,只需要矩阵相乘即可: 伪代码: for i=1 to n for j=1 to n for k=1 to n resul ...
- SqlServer之代码块相关
原创文章,转载必需注明出处:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/sqlserver-codeblock/ 一.go语句 ...
- poj 1947 树形dp
思路:dp[i][j]表示,以i节点为根,删去j个节点最少要断几条边. 那么dp[u][j]=min(dp[u][j],dp[v][k]+dp[u][j-k]);//选取最优状态 dp[u][j]=m ...
- (Android)处理图片成圆形
Android将一张Bitmap处理成圆形是十分常见的,经常见的场合就是作为用户头像,我们可以Canvas来辅助实现这个功能,代码如下 public static Bitmap toRoundCorn ...