Silverlight 图形的转换

概述这篇是以 Blend 设计工具上的功能按钮为线索来介绍几种Silverlight 图形的转换。转换一般不影响布局，通常是在动画处理或向元素应用添加临时效果时用。 变化中心点的定义 变化的中心点在Blend工具上有2个地方定义： 一个是可以通过鼠标点击就可以使用的9个常用位置， 如下图的 就是。我们可用鼠标来点击这9个点，对应设置这个元素的中心位置。 对应到Xaml 文件中，就是修改选择元素的 Re

这篇是以 Blend 设计工具上的功能按钮为线索来介绍几种Silverlight 图形的转换。转换一般不影响布局，通常是在动画处理或向元素应用添加临时效果时用。

变化中心点的定义

变化的中心点在Blend工具上有2个地方定义：

一个是可以通过鼠标点击就可以使用的9个常用位置，

如下图的

就是。我们可用鼠标来点击这9个点，对应设置这个元素的中心位置。

对应到Xaml 文件中，就是修改选择元素的 RendertransformOrigin 属性。

UIElement.RendertransformOrigin 属性用于获取或设置由 Rendertransform 声明中，任何可能导致转换的中心点，这个中心点是相对于元素的边界而言的。

设置的值类似： RendertransformOrigin="0.5,1"， 依次是水平原点因子，垂直原点因子。通常这两个值为 0 至 1 之间的值。

0 和 1 之间的值被解释为当前元素在每个 X 轴和 Y 轴上的范围的因子。例如，(0.5,0.5) 将使呈现转换位于元素中心，而 (1,1) 会将呈现转换置于元素的右下角。

默认值是一个坐标为 (0,0) 的 Point。即：

RendertransformOrigin 也可以接受 0 和 1 以外的值，并且将导致更不寻常的转换效果。例如，如果将 RendertransformOrigin 设为 (5,5)，然后应用 Rotatetransform，则旋转点将位于元素自身边界之外。转换将沿圆心远在右下方的大圆旋转元素。原点可能位于其父元素的某处，并可能位于框架或视图之外。负点值与此类似，这将超出左上边界。

Blend 中另外一个设置中心点的位置如下：在这里我们可以更灵活的设置，而不是之前的9个固定的常用点。

 

 

平移 Translatetransform

沿 X、Y 平移对象 跟定义常用的9个中心点在同一界面，如下：

上图中，指定元素按照X轴移动10个像素 ，Y轴移动10个像素。这两个属性的默认值都是0。可以为正值，可以为负值，可以为非整数。比如下面设置就是可以的

上面图片中，当我们把“使用相对值”打上勾时，表示我们要在目前平移数据上再相对增加的值，这时候输入相对值后，需要点击应用才会起作用。

在输入数字框里面，我们使用滚轮，也可以自动增加或者减少数字。

 

这个变化可以用来做伪3D效果。比如下面的例子：

Xaml 文件

<TextBlock  FontFamily="Verdana"  FontSize="32"  FontWeight="Bold"   Foreground="Black"  Text="Translated Text">  <TextBlock.Rendertransform>    <Translatetransform X="2" Y="2" />      TextBlock.Rendertransform>    TextBlock> <TextBlock FontFamily="Verdana" FontSize="32" FontWeight="Bold" Foreground="Coral" Text="Translated Text"/>

执行效果：

旋转 Rotatetransform

旋转是以之前定义的中心点为圆心，进行旋转指定的角度。 正数表示顺时针旋转，负数表示逆时针旋转。

上述功能页的“使用相对值”的逻辑跟 Translatetransform 的逻辑一样。

我们在

上拖动鼠标，也可以实现手工旋转。

在输入数字框里面，我们使用滚轮，也可以自动增加或者减少数字。

在 Xaml 中是类似如下的代码：

注：

Rotatetransform  本身具有定义中心点的功能，类似代码如后：

但是，一旦我们定义了元素的 RendertransformOrigin， 则 RendertransformOrigin 优先级高于 Rotatetransform 定义的中心点。

 

缩放 Scaletransform

如下图所示，我们可以使用 Scaletransform 沿水平或垂直方向拉伸或收缩对象。

ScaleX 属性指定使对象沿 x 轴拉伸或收缩的量，ScaleY 属性指定使对象沿 y 轴拉伸或收缩的量。

缩放是以之前的中心点为原点进行的缩放。可以为负值，表示到了中心点的左边（ScaleX 为负），上面（ScaleY 为负）。

在Xaml中代码类似如下：

缩放常用于选中某个对象时突出显示。

注：

Scaletransform 本身具有定义中心点的功能，类似代码如后：

但是，一旦我们定义了元素的 RendertransformOrigin， 则 RendertransformOrigin 优先级高于 Scaletransform 定义的中心点。

 

倾斜 Skewtransform

以之前定义的中心点为原点，进行倾斜。

默认是不倾斜的，即都是0。

可以为正数，也可以为负数。数字表示以中心点为中心倾斜的度数。

在Xaml中代码类似如下：

注：

Skewtransform 本身具有定义中心点的功能，类似代码如后：

但是，一旦我们定义了元素的 RendertransformOrigin， 则 RendertransformOrigin 优先级高于 Skewtransform 定义的中心点。

 

翻转

至于Blend 中的“反转”则是上述四种转换的一个汇总使用的几个可能会比较常用的场景。

  X 轴翻转，则它的缩放变化 Scaletransform 的 ScaleX 再乘以-1。

X 轴翻转，则它的缩放变化 Scaletransform 的 ScaleY 再乘以-1。

 

 

参考资料：

Silverlight学习笔记--通用绘图属性
http://blog.joycode.com/ghj/archive/2009/11/30/115793.joy

UIElement.RendertransformOrigin 属性
http://msdn.microsoft.com/zh-cn/library/system.windows.uielement.rendertransformorigin.aspx

Translatetransform 类
http://msdn.microsoft.com/zh-cn/library/system.windows.media.translatetransform(VS.95).aspx

Rotatetransform 类
http://msdn.microsoft.com/zh-cn/library/system.windows.media.rotatetransform.aspx

Scaletransform 类
http://msdn.microsoft.com/zh-cn/library/system.windows.media.scaletransform.aspx

Skewtransform 类
http://msdn.microsoft.com/zh-cn/library/system.windows.media.skewtransform(VS.95).aspx

总结

以上是内存溢出为你收集整理的Silverlight 图形的转换全部内容，希望文章能够帮你解决Silverlight 图形的转换所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。