Silverlight三维透视+倒影效果
知识概要：
1.使用2D内容创建3D体验，了解图像的PlaneProjection属性，具体内容读者自己查看文档。
2.Silverlight图形图形的变换效果的使用。
最终的效果如下图：
马上开始动手：
首先准备五张图片：直接在xaml中进行导入：
<Image Source="1.jpg" Stretch="Fill" Width="192" Height="276"/>
<Image Source="2.jpg" Stretch="Fill" Width="192" Height="276"/>
<Image Source="3.jpg" Stretch="Fill" Width="192" Height="276"/>
<Image Source="4.jpg" Stretch="Fill" Width="192" Height="276"/>
<Image Source="5.jpg" Stretch="Fill" Width="192" Height="276"/>
</Grid>
其中的Stretch属性设置为Fill;
知识拓展： 关于Stretch属性的四个值------------------------->Start：
----------------------------------->1.None: 不对图像进行拉伸，使得填充完规定的大小尺寸
----------------------------------->2.Uniform:按比例进行拉伸，直到有一边达到规定的尺寸，其余部分不会被填充
----------------------------------->3.UniformToFill:按比例进行拉伸，直到所以的边都满足规定的尺寸。超出大小部分会被剪裁。
----------------------------------->4.Fill：不按比例拉伸，完全填充规定的尺寸
------END
至此，你已经成功让5张漂亮的图片在屏幕上显示了。
接着，我们试着让它们出现3D透视效果：
<Image.Projection>
<PlaneProjection RotationY="-70" GlobalOffsetX="-230" GlobalOffsetZ="-100"/>
</Image.Projection>
</Image>
<Image Source="2.jpg" Stretch="Fill" Width="192" Height="276">
<Image.Projection>
<PlaneProjection RotationY="-70" GlobalOffsetX="-155" GlobalOffsetZ="-100"/>
</Image.Projection>
</Image>
<Image Source="3.jpg" Stretch="Fill" Width="192" Height="276">
<Image.Projection>
<PlaneProjection RotationY="70" GlobalOffsetX="230" GlobalOffsetZ="-100"/>
</Image.Projection>
</Image>
<Image Source="4.jpg" Stretch="Fill" Width="192" Height="276">
<Image.Projection>
<PlaneProjection RotationY="70" GlobalOffsetX="155" GlobalOffsetZ="-100"/>
</Image.Projection>
</Image>
<Image Source="5.jpg" Stretch="Fill" Width="192" Height="276"/>
在上述代码中，除了第五张图片不对他进行变化（因为他是放在中间的图片），其它的都通过 Projection的PlaneProjection属性进行设置。
PlaneProjection提供的一套属性使得其中的element具有在3维空间中的形状。其中RotationY是对element在三维坐标中沿着Y轴旋转一定的度数，这里第一张图片旋转-70 ；GlobalOffsetX是在X轴坐标上的偏移。例如：GlobalOffsetX=“-230”，就表示在X负半轴上离原点230个单位处。GlobalOffsetZ与GlobalOffsetX一样，只不过它是在Z轴（垂直于屏幕）的偏移。我们让图像在Z轴向屏幕里面移动100个单位。
到此，我们已经让图片具有3D效果。
接下来，就开始设置倒影：
我们以图片一为例：
<Image Source="1.jpg" Stretch="Fill" Width="192" Height="276">
<Image.Projection>
<PlaneProjection RotationY="-70" GlobalOffsetX="-230" GlobalOffsetZ="-100"/>
</Image.Projection>
</Image>
<Image Source="1.jpg" Stretch="Fill" Width="192" Height="276" Opacity="0.2">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="-1"/>
<TranslateTransform Y="470"/>
<SkewTransform AngleY="-25"/>
</TransformGroup>
</Image.RenderTransform>
<Image.Projection>
<PlaneProjection RotationY="-70" GlobalOffsetX="-230" GlobalOffsetZ="-100"/>
</Image.Projection>
<Image.OpacityMask>
<LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0">
<GradientStop Offset="0.0" Color="#00000000"/>
<GradientStop Offset="1.0" Color="#FF000000"/>
</LinearGradientBrush>
</Image.OpacityMask>
</Image>
A.实现思路很简单：
.复制图片一
.沿着X轴翻转
.进行图片的倾斜变换进行调整
.制作半遮罩效果
-----------------------------知识延伸：（变换效果)-------------------------
Silverlight中的变换是由Transform类来定义，其中主要包括：
RotateTransform:旋转变换
ScaleTransform：缩放变换
SkewTransform：倾斜变换
TranslateTransform：移动变换
TransformGroup：变换组
MatrixTransform：矩阵变换
（ 这里不做具体介绍，具体内容及使用方法请查看文档和相关基础书籍）
--------------------------------------------------------------------------------
复制图片：我们采用在原有图片基础上再导入图片一；沿着X轴翻转，使用ScaleTransform属性，使它的ScaleY="-1",这样就使得图片翻转。然后通过TranslateTransform属性的Y属性在y 轴上进行位置的调整，使得图像一的副本位于图
像一下面的合适位置，但是你会发现，由于之前进行了3D透视变化。两图像并没有在同一基准线上，因此要通过SkewTransform进行图像的倾斜变换。
最后制作对倒影图片制作半遮罩效果，通过Image属性的OpcityMask 属性进行设置。在其中，我们放入了一个
LinearGradientBrush线性渐变画刷，通过设置GradientStop属性的Offset以及Color属性，制作出半遮罩效果。
至此，一个简单的三维透视+倒影效果就做好了。
完整的代码：
<Image Source="1.jpg" Stretch="Fill" Width="192" Height="276">
<Image.Projection>
<PlaneProjection RotationY="-70" GlobalOffsetX="-230" GlobalOffsetZ="-100"/>
</Image.Projection>
</Image>
<Image Source="1.jpg" Stretch="Fill" Width="192" Height="276" Opacity="0.2">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="-1"/>
<TranslateTransform Y="470"/>
<SkewTransform AngleY="-25"/>
</TransformGroup>
</Image.RenderTransform>
<Image.Projection>
<PlaneProjection RotationY="-70" GlobalOffsetX="-230" GlobalOffsetZ="-100"/>
</Image.Projection>
<Image.OpacityMask>
<LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0">
<GradientStop Offset="0.0" Color="#00000000"/>
<GradientStop Offset="1.0" Color="#FF000000"/>
</LinearGradientBrush>
</Image.OpacityMask>
</Image>
<Image Source="2.jpg" Stretch="Fill" Width="192" Height="276">
<Image.Projection>
<PlaneProjection RotationY="-70" GlobalOffsetX="-155" GlobalOffsetZ="-100"/>
</Image.Projection>
</Image>
<Image Source="2.jpg" Stretch="Fill" Width="192" Height="276" Opacity="0.2">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="-1"/>
<TranslateTransform Y="500"/>
<SkewTransform AngleY="-25"/>
</TransformGroup>
</Image.RenderTransform>
<Image.Projection>
<PlaneProjection RotationY="-70" GlobalOffsetX="-155" GlobalOffsetZ="-100"/>
</Image.Projection>
<Image.OpacityMask>
<LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0">
<GradientStop Offset="0.0" Color="#00000000"/>
<GradientStop Offset="1.0" Color="#FF000000"/>
</LinearGradientBrush>
</Image.OpacityMask>
</Image>
<Image Source="3.jpg" Stretch="Fill" Width="192" Height="276">
<Image.Projection>
<PlaneProjection RotationY="70" GlobalOffsetX="230" GlobalOffsetZ="-100"/>
</Image.Projection>
</Image>
<Image Source="3.jpg" Stretch="Fill" Width="192" Height="276" Opacity="0.2">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="-1"/>
<TranslateTransform Y="380"/>
<SkewTransform AngleY="25"/>
</TransformGroup>
</Image.RenderTransform>
<Image.Projection>
<PlaneProjection RotationY="70" GlobalOffsetX="230" GlobalOffsetZ="-100"/>
</Image.Projection>
<Image.OpacityMask>
<LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0">
<GradientStop Offset="0.0" Color="#00000000"/>
<GradientStop Offset="1.0" Color="#FF000000"/>
</LinearGradientBrush>
</Image.OpacityMask>
</Image>
<Image Source="4.jpg" Stretch="Fill" Width="192" Height="276">
<Image.Projection>
<PlaneProjection RotationY="70" GlobalOffsetX="155" GlobalOffsetZ="-100"/>
</Image.Projection>
</Image>
<Image Source="4.jpg" Stretch="Fill" Width="192" Height="276" Opacity="0.2">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="-1"/>
<TranslateTransform Y="380"/>
<SkewTransform AngleY="25"/>
</TransformGroup>
</Image.RenderTransform>
<Image.Projection>
<PlaneProjection RotationY="70" GlobalOffsetX="155" GlobalOffsetZ="-100"/>
</Image.Projection>
<Image.OpacityMask>
<LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0">
<GradientStop Offset="0.0" Color="#00000000"/>
<GradientStop Offset="1.0" Color="#FF000000"/>
</LinearGradientBrush>
</Image.OpacityMask>
</Image>
<Image Source="5.jpg" Stretch="Fill" Width="192" Height="276" Opacity="{0.2}"/>
<Image Source="5.jpg" Stretch="Fill" Width="192" Height="276" Opacity="0.2">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="-1"/>
<TranslateTransform Y="552"/>
</TransformGroup>
</Image.RenderTransform>
<Image.OpacityMask>
<LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0">
<GradientStop Offset="0.0" Color="#00000000"/>
<GradientStop Offset="1.0" Color="#FF000000"/>
</LinearGradientBrush>
</Image.OpacityMask>
</Image>
</Grid>
Silverlight三维透视+倒影效果的更多相关文章
- 【CSS3进阶】酷炫的3D旋转透视
之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣. 最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研 ...
- Windows Phone开发（19）：三维透视效果
原文:Windows Phone开发(19):三维透视效果 三维效果也可以叫透视效果,所以,我干脆叫三维透视效果.理论知识少讲,直接用例开场吧,因为这个三维效果其实很简单,比上一节中的变换更省事,不信 ...
- 【CSS进阶】试试酷炫的 3D 视角
写这篇文章的缘由是因为看到了这个页面: 戳我看看(移动端页面,使用模拟器观看) 运用 CSS3 完成的 3D 视角,虽然有一些晕3D,但是使人置身于其中的交互体验感觉非常棒,运用在移动端制作一些 H5 ...
- css3实践—创建3D立方体
css3实践-创建3D立方体 要想实现3D的效果,其实非常简单,只需指定一个元素为容器并设置transform-style:preserve-3d,那么它的后代元素便会有3D效果.不过有很多需要注意的 ...
- HTML5－36d嗨起^_^
如果一个前端不会写css那必然会被贻笑大方,利用html5新增的一些c3属性可以做许许多多炫酷的效果. 大家先看我写的一个小demo: http://zpf92.github.io/build/ 这个 ...
- 用MFC实现OpenGL编程
一.OpenGL简介 众所周知,OpenGL原先是Silicon Graphics Incorporated(SGI公司)在他们的图形工作站上开发高质量图像的接口.但最近几年它成为一个非常优秀的开放式 ...
- Windows Phone开发（20）：当MediaElement和VideoBrush合作的时候
原文:Windows Phone开发(20):当MediaElement和VideoBrush合作的时候 前面说的那么多控件都是"静态"的,都是"哑吧"的,今天 ...
- css3的2D和3D的转换
一:2D转换: 通过 CSS3 transform转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 2D移动:translate().使用translate()函数,你可以把元素从原来的位置移 ...
- 【多视图几何】TUM 课程 第3章 透视投影
课程的 YouTube 地址为:https://www.youtube.com/playlist?list=PLTBdjV_4f-EJn6udZ34tht9EVIW7lbeo4 .视频评论区可以找到课 ...
随机推荐
- 自定义HTML标签属性
为HTML元素添加一自定义的属性非常方便,只须将其加到尖括号中即可,与内置属性地位相等. 如我们要为TextBox元素添加属性idvalue: <input type="text&qu ...
- 洛谷——P1021 邮票面值设计
https://www.luogu.org/problem/show?pid=1021 题目描述 给定一个信封,最多只允许粘贴N张邮票,计算在给定K(N+K≤15)种邮票的情况下(假定所有的邮票数量都 ...
- leetcode笔记：Word Break
一. 题目描写叙述 Given a string s and a dictionary of words dict, determine if s can be segmented into a sp ...
- PHP路由技术的原理与实践
0x00 路由实现原理 用户通过指定的URL范式对后台进行訪问.URL路由处理类进行处理后.转发到逻辑处理类,逻辑处理类将请求结果返回给用户. 约定URL范式和规则 约定一套自己喜欢的,对搜索引擎友好 ...
- 洛谷——P1011 车站
https://www.luogu.org/problem/show?pid=1011#sub 题目描述 火车从始发站(称为第1站)开出,在始发站上车的人数为a,然后到达第2站,在第2站有人上.下车, ...
- Linux 内核源代码分析 chap 2 存储管理 （5）
物理页面分配 linux 内核 2.4 中有 2 个版本号的物理页面分配函数 alloc_pages(). 一个在 mm/numa.c 中, 还有一个在 mm/page_alloc.c 中, 依据条件 ...
- amazeui页面分析5
amazeui页面分析5 一.总结 1.把原模板当成样例集合就好 2.都是一块一块的,删改等操作都方便 3.list方面的操作很多都是ui配合li 4.其实容器本质还是div,所以真的算简单了 5.样 ...
- Android OnGestureListener用法 识别用户手势 左右滑动
Android可以识别用户的手势(即用户用手指滑动的方向),通过用户不同的手势,从而做出不同的处理 需要使用OnGestureListener 比如说看电子书的时候翻页,或者要滑动一些其他内容 直接上 ...
- （嵌入式开发）自己写bootloader之编写第二阶段
内核编译(make)之后会生成两个文件,一个Image,一个zImage,其中Image为内核映像文件,而zImage为内核的一种映像压缩文件,Image大约为4M,而zImage不到2M. ...
- Maven基础教程 分类： C_OHTERS 2015-04-10 22:53 232人阅读 评论(0) 收藏
更多内容请参考官方文档:http://maven.apache.org/guides/index.html 官方文档很详细,基本上可以查找到一切相关的内容. 另外,快速入门可参考视频:孔浩的maven ...