silverlight   发布时间:2022-05-03  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Silverlight学习之RenderTransform特效(五种基本变换)及(矩阵变换MatrixTransform)大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

概述

RenderTransform特效:   变形(RenderTransform)类是为了达到直接去改变某个Silverlight对象的形状(比如缩放、旋转一个元素)的目的而设计的,RenderTransform包含的变形属性成员就是专门用来改变Silverlight对象形状的,它可以实现对元素拉伸,旋转,扭曲等效果,同时变形特效也常用于辅助产生各种动画效果,下面列出RenderTransform类

RenderTransform特效:

  变形(RenderTransform)类是为了达到直接去改变某个Silverlight对象的形状(比如缩放、旋转一个元素)的目的而设计的,RenderTransform包含的变形属性成员就是专门用来改变Silverlight对象形状的,它可以实现对元素拉伸,旋转,扭曲等效果,同时变形特效也常用于辅助产生各种动画效果,下面列出RenderTransform类的成员:

l  TranslateTransform:能够让某对象的位置发生平移变化。

RotateTransform:能够让某对象产生旋转变化,根据中心点进行顺时针旋转或逆时针旋转。

ScaleTransform:能够让某对象产生缩放变化。

SkewTransform:能够让某对象产生扭曲变化。

TransformGroup:能够让某对象的缩放、旋转、扭曲等变化效果合并起来使用。

@H_924_34@matrixTransform:能够让某对象通过矩阵算法实现更为复杂的变形。

  变形元素包括平移变形、旋转变形、缩放变形、扭曲变形、矩阵变形和组合变形元素,变形特效常用于在不改变对象本身构成的情况下,使对象产生变形效果,所以变形元素常辅助产生Silverlight中的各种动画效果

  TranslateTransform(平移变化):包含X、Y 两种属性,以原来的对象为坐标原点(0,0),然后向X轴、Y轴进行平移变换。

Silverlight学习之RenderTransform特效(五种基本变换)及(矩阵变换MatrixTransform)

1 <Canvas>
2 Image Canvas.Top="160" Canvas.Left="140" source="sun.jpg" Opacity="0.5"></Image3 ="sun.jpg"4 Image.RenderTransform5 TranslateTransform X="120" Y="120"TranslateTransform6 </7 8 >

Silverlight学习之RenderTransform特效(五种基本变换)及(矩阵变换MatrixTransform)

          

Silverlight学习之RenderTransform特效(五种基本变换)及(矩阵变换MatrixTransform)



  RotateTransform(旋转变化):包括属性Angle(旋转角度),CenterX、CenterY(旋转的中心)

RotateTransform Angle="45" CenterX="0" CenterY="0"RotateTransform           

Silverlight学习之RenderTransform特效(五种基本变换)及(矩阵变换MatrixTransform)



  ScaleTransform(缩放变化):包括属性ScaleX、ScaleY、CenterX、CenterY,其中ScaleX、ScaleY属性表示对象在X、Y轴进行缩放的倍数,使用CenterX 和 CenterY属性指定一个中心点。

ScaleTransform
ScaleX="0.5" ScaleYScaleTransform8
          

Silverlight学习之RenderTransform特效(五种基本变换)及(矩阵变换MatrixTransform)



  
  SkewTransform(扭曲变化):包括属性AngleX、AngleY、CenterX、CenterY。其中使用AngleX让元素相对X轴倾斜角度,AngleY是让元素围绕Y轴的倾斜角度。同样CenterX和CenterY是中心点位置。

SkewTransform
AngleX="30" AngleY="10"SkewTransform          

Silverlight学习之RenderTransform特效(五种基本变换)及(矩阵变换MatrixTransform)



    TransformGroup:缩放、旋转、扭曲等变化效果合并起来。以上四种基本变化只是单一的变化,如果想要实现多种效果的叠加,那么就要使用到TransformGroup,@R_674_8953@。TransformGroup的作用类似于在控件布局中的StackPanel内嵌的作用,是把多种变化元素组合成一种变化的容器。

1
Canvas Width="640" Height="480" 2 Rectangle @H_610_262@="20"@H_610_262@="200" Width="400"@H_610_262@="300" stroke="Black" strokeThickness="5" 3 Rectangle.RenderTransform 4 TransformGroup 5 <!--RotateTransform 变换-->
6 7 SkewTransform变换 8 ="-10"@H_610_262@="50" 9 10 11 Rectangle.Fill12 ImageBrush ImagesourceImageBrush13 14 Rectangle15



          

Silverlight学习之RenderTransform特效(五种基本变换)及(矩阵变换MatrixTransform)





-----------------------------------------------------
@H_225_30@matrixTransform 矩阵变换------------------------------------------

   
  @H_801_360@matrixTransform矩阵变换,其实就是其他变形类的底层实现的代码,其他的类都是基于这个类的扩展,以让用户可以更加简单方便的应用,至于MatrixTransform则是通过一种矩阵算法来进行运算得到相应的变形的效果的。矩阵的一些基本算法就不多总结了,以前上课就学过了,网上也有不少讲解。

Silverlight学习之RenderTransform特效(五种基本变换)及(矩阵变换MatrixTransform)


  
  矩阵中第三列的值是固定不变的!



  原理:
  原坐标(x0,y0)通过这个3*3矩阵

Silverlight学习之RenderTransform特效(五种基本变换)及(矩阵变换MatrixTransform)

得到变换之后的新坐标(x1,y1)的过程如下:


    [x0,y0] *

Silverlight学习之RenderTransform特效(五种基本变换)及(矩阵变换MatrixTransform)

,通过矩阵乘法可得到坐标 (x0 * M11+x0 * M21,y0 * M12+y0 * M22)之后,再加上 (OffsetX,OffsetY) 即可得到新坐标(x1,y1)。也即是说最终坐标 (x1,y1) : x1 =  x0 * M11 + x0 * M21 + OffsetX , y1 = y0 * M12 + y0 * M22 + OffsetY.


1 <!--源码用法--> 
2
3 @H_344_404@<
@H_273_426@matrixTransform @H_532_428@matrix@H_344_404@="M11 M12 M21 M22 OffsetX OffsetY"@H_344_404@></@H_273_426@matrixTransform@H_344_404@>

 
  下面使用MatrixTransform矩阵变换实现以上五种基本的变换效果

 

Silverlight学习之RenderTransform特效(五种基本变换)及(矩阵变换MatrixTransform)

 1 Canvas Width@H_344_404@="1200" Height@H_344_404@="300"@H_344_404@>
2 StackPanel Orientation@H_344_404@="Horizontal" Canvas.Top@H_344_404@="50" 3 TranslateTransform 平移 -->
4 Image source@H_344_404@="Images/adobe_Ai.png"="100" Width Stretch@H_344_404@="Fill"
5 Margin@H_344_404@="10" Opacity@H_344_404@="0.5"Image 6 7 ="10" 8 Image.RenderTransform 9 @H_344_404@="1 0 0 1 -80 30"10 @H_344_404@</@H_607_507@11 12
13 RotateTransform 旋转 14 @H_344_404@="Images/adobe_Dw.png"15 16 17 18 19 90°旋转 20 @H_344_404@="0 1 -1 0 30 0"21 22 23
24 ScaleTransform 缩放 25 @H_344_404@="Images/adobe_Fl.png"26 27 28 29 30 放大1.5倍31 @H_344_404@="1.5 0 0 1.5 -80 0"32 33 34
35 SkewTransform 扭曲倾斜 36 @H_344_404@="Images/adobe_Fw.png"37 38 39 40 41 x轴倾斜 42 @H_344_404@="1 0 1 1 -80 0"43 44 45
46 TransformGroup 扭曲、缩放 47 @H_344_404@="Images/adobe_Id.png"48 49 50 51 52 53 54 @H_344_404@="1.5 0 1 1.5 -120 0"55 56 57 StackPanel58 Canvas@H_344_404@>

Silverlight学习之RenderTransform特效(五种基本变换)及(矩阵变换MatrixTransform)

大佬总结

以上是大佬教程为你收集整理的Silverlight学习之RenderTransform特效(五种基本变换)及(矩阵变换MatrixTransform)全部内容,希望文章能够帮你解决Silverlight学习之RenderTransform特效(五种基本变换)及(矩阵变换MatrixTransform)所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。