第二十一章:变换(一)

简介: 在StackLayout和Grid的帮助下,Xamarin.Forms可以很好地确定页面上视觉元素的大小和位置。但是,有时候,应用程序需要(或方便)进行一些调整。您可能希望稍微偏移元素的位置,更改它们大小,甚至旋转它们。

在StackLayout和Grid的帮助下,Xamarin.Forms可以很好地确定页面上视觉元素的大小和位置。但是,有时候,应用程序需要(或方便)进行一些调整。您可能希望稍微偏移元素的位置,更改它们
大小,甚至旋转它们。
使用Xamarin的特征可以实现位置,大小或方向的这种变化。称为变换的形式。变换的概念起源于几何。变换是将点映射到其他点的公式。例如,如果要在笛卡尔坐标系上移动几何对象,可以将常量偏移因子添加到定义该对象的所有坐标。
这些数学,几何变换在计算机图形编程中起着至关重要的作用,它们有时被称为矩阵变换,因为它们最容易使用矩阵代数进行数学表达。没有变换,就没有3D图形。但是多年来,变换已经从图形编程迁移到用户界面编程。 Xamarin.Forms支持的所有平台都支持可应用于用户界面元素(如文本,位图和按钮)的基本转换。
Xamarin.Forms支持三种基本类型的转换:

  • Translation - 水平或垂直或两者都移动元素。
  • Scale - 更改元素的大小。
  • Rotation- 围绕点或轴旋转元素。

Xamarin.Forms支持的缩放在所有方向上是均匀的,技术上称为各向同性缩放。 您无法使用缩放来更改可视元素的纵横比。 屏幕的二维表面和3D空间都支持旋转。 Xamarin.Forms不支持偏移变换或广义矩阵变换。
Xamarin.Forms支持VisualElement类的八个属性的这些转换。 这些属性都是double类型:

  • TranslationX
  • TranslationY
  • Scale
  • Rotation
  • RotationX
  • RotationY
  • AnchorX
  • AnchorY

正如您将在下一章中看到的那样,Xamarin.Forms还具有广泛且可扩展的动画系统,可以定位这些属性。 但您也可以使用Device.StartTimer或Task.Delay自行执行变换动画。 本章演示了一些动画技术,可能会帮助您进入动画框架,为第22章做准备。

目录
相关文章
Halcon标定系列(5):4点标定之眼在手外项目实践,已知仿射变换矩阵,计算得到旋转角度和缩放因子等参数
Halcon标定系列(5):4点标定之眼在手外项目实践,已知仿射变换矩阵,计算得到旋转角度和缩放因子等参数
805 0
Halcon标定系列(5):4点标定之眼在手外项目实践,已知仿射变换矩阵,计算得到旋转角度和缩放因子等参数
|
Android开发 索引
第二十一章:变换(十)
样式通过将AnchorX值设置为0来结束,该值将旋转中心设置为每个Label的左边缘的垂直中心。 然后每个Label都会获得一个独特的旋转设置:显然,选择“ROTATE”字符串之前的空格,以便R的垂直条组合形成一个看起来几乎像圆的16边多边形。
1018 0
|
JavaScript Android开发 索引
第二十一章:变换(九)
旋转的文字效果轮换很有趣。 旋转动画时更有趣(正如您将在下一章中看到的那样),但即使使用静态图像也很有趣。本章和下一章中的几个旋转示例涉及将视觉元素排列在一个圆圈中,所以让我们首先尝试显示一个简单的圆圈。
841 0
|
Android开发
第二十一章:变换(八)
旋转变换 “旋转”属性旋转屏幕表面上的可视元素。 将“旋转”属性设置为以度为单位的角度(不是弧度)。 正角度顺时针旋转元素。 您可以将“旋转”设置为小于0或大于360的角度。实际旋转角度是旋转属性模数360的值。
816 0
|
Android开发
第二十一章:变换(十四)
3D-ish旋转 即使计算机屏幕是平面和二维的,也可以在这些屏幕上绘制视觉对象,使其具有第三维的外观。 在本章的前面,您看到了一些文本效果,它们提供了第三个维度的提示,而Xamarin.Forms支持两个额外的旋转,名为RotationX和RotationY,它们似乎也突破了屏幕固有的二维平面度。
1342 0
|
Android开发 iOS开发
第二十一章:变换(七)
锚定规模当你尝试使用Scale属性时,你可能已经注意到视觉元素的任何扩展都是从元素的中心向外发生的,如果你将视觉元素缩小到任何东西,它也会向中心收缩。这是另一种思考方式:无论Scale属性的设置如何,视觉元素正中心的点都保持在同一位置。
934 0
|
Android开发 iOS开发 Windows
第二十一章:变换(六)
两个按钮的Clicked处理程序每个都启动一个独立的动画。 第一个Button的Clicked处理程序将其Scale属性从1设置为5并再次返回,而第二个Button的Clicked处理程序将其FontSize属性设置为1到5的比例因子,然后再返回。
940 0
|
JavaScript Android开发 索引
第二十一章:变换(十二)
这两个问题都在非最小的BoxViewClock中得到解决。 XAML文件与MinimalBoxViewClock非常相似,但代码隐藏文件更为广泛。 它以名为HandParams的小结构开始,该结构定义每只手相对于半径的大小,但也包括偏移值。
1062 0
|
JavaScript Android开发
第二十一章:变换(五)
规模变换 VisualElement类定义名为Scale的属性,您可以使用该属性更改元素的呈现大小。 Scale属性不会影响布局(将在ButtonScaler程序中演示)。它不会影响元素的get-only Width和Height属性,也不会影响包含Width和Height值的get-only Bounds属性。
906 0
|
JavaScript Android开发
第二十一章:变换(十一)
模拟时钟用于图形用户界面的经典示例程序之一是模拟时钟。 BoxView再一次为时钟之手进行救援。 必须根据当前时间的小时,分钟和秒旋转这些BoxView元素。让我们首先使用名为AnalogClockViewModel的类来处理旋转数学,该类包含在Xamarin.
1068 0