大佬教程收集整理的这篇文章主要介绍了Silverlight 图形的转换,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
这篇是以 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) 会将呈现转换置于元素的右下角。
RenderTransformOrigin 也可以接受 0 和 1 以外的值,并且将导致更不寻常的转换效果。例如,如果将 RenderTransformOrigin 设为 (5,5),然后应用 RotateTransform,则旋转点将位于元素自身边界之外。转换将沿圆心远在右下方的大圆旋转元素。原点可能位于其父元素的某处,并可能位于框架或视图之外。负点值与此类似,这将超出左上边界。
Blend 中另外一个设置中心点的位置如下:在这里我们可以更灵活的设置,而不是之前的9个固定的常用点。
沿 X、Y 平移对象 跟定义常用的9个中心点在同一界面,如下:
上图中,指定元素按照X轴移动10个像素 ,Y轴移动10个像素。这两个属性的默认值都是0。可以为正值,可以为负值,可以为非整数。比如下面设置就是可以的
上面图片中,当我们把“使用相对值”打上勾时,表示我们要在目前平移数据上再相对增加的值,这时候输入相对值后,需要点击应用才会起作用。
在输入数字框里面,我们使用滚轮,也可以@L_@R_618_11235@_26@增加或者减少数字。
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"/>
执行效果:
旋转是以之前定义的中心点为圆心,进行旋转指定的角度。 正数表示顺时针旋转,负数表示逆时针旋转。
上述功能页的“使用相对值”的逻辑跟 TranslateTransform 的逻辑一样。
上拖动鼠标,也可以实现手工旋转。在输入数字框里面,我们使用滚轮,也可以@L_@R_618_11235@_26@增加或者减少数字。
在 Xaml 中是类似如下的代码:
注:
RotateTransform 本身具有定义中心点的功能,类似代码如后: @H_403_189@
但是,一旦我们定义了元素的 RenderTransformOrigin, 则 RenderTransformOrigin 优先级高于 RotateTransform 定义的中心点。
如下图所示,我们可以使用 ScaleTransform 沿水平或垂直方向拉伸或收缩对象。
ScaleX 属性指定使对象沿 x 轴拉伸或收缩的量,ScaleY 属性指定使对象沿 y 轴拉伸或收缩的量。
缩放是以之前的中心点为原点进行的缩放。可以为负值,表示到了中心点的左边(ScaleX 为负),上面(ScaleY 为负)。
在Xaml中代码类似如下:
缩放常用于选中某个对象时突出显示。
注:
ScaleTransform 本身具有定义中心点的功能,类似代码如后:
但是,一旦我们定义了元素的 RenderTransformOrigin, 则 RenderTransformOrigin 优先级高于 ScaleTransform 定义的中心点。
以之前定义的中心点为原点,进行倾斜。
默认是不倾斜的,即都是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 图形的转换所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。