第二十一章:变换(十四)

简介: 3D-ish旋转即使计算机屏幕是平面和二维的,也可以在这些屏幕上绘制视觉对象,使其具有第三维的外观。 在本章的前面,您看到了一些文本效果,它们提供了第三个维度的提示,而Xamarin.Forms支持两个额外的旋转,名为RotationX和RotationY,它们似乎也突破了屏幕固有的二维平面度。

3D-ish旋转

即使计算机屏幕是平面和二维的,也可以在这些屏幕上绘制视觉对象,使其具有第三维的外观。 在本章的前面,您看到了一些文本效果,它们提供了第三个维度的提示,而Xamarin.Forms支持两个额外的旋转,名为RotationX和RotationY,它们似乎也突破了屏幕固有的二维平面度。
处理3D图形时,将屏幕视为3D坐标系统的一部分很方便。 像往常一样,X轴是水平的,Y轴是垂直的。 但是还有一个隐含的Z轴与屏幕正交。 该Z轴从屏幕伸出并延伸穿过屏幕的后部。
在2D空间中,旋转发生在点周围。 在3D空间中,围绕轴旋转。 RotationX属性围绕X轴旋转。 视觉对象的顶部和底部似乎向观察者移动或远离观察者。 类似地,RotationY围绕Y轴旋转。 视觉对象的左侧和右侧似乎向观察者移动或远离观察者。 通过扩展,基本的Rotation属性是围绕Z轴旋转。 为了保持一致性,Rotation属性可能应该命名为RotationZ,但这可能会使那些只考虑二维的人感到困惑。
ThreeDeeRotationDemo程序允许您尝试RotationX,RotationY和Rotation的组合,以及探索AnchorX和AnchorY如何影响这两个附加旋转属性:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ThreeDeeRotationDemo.ThreeDeeRotationDemoPage">
    <StackLayout Padding="20, 10">
        <Frame x:Name="frame"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand"
               OutlineColor="Accent">
            <Label Text="TEXT"
                   FontSize="72" />
        </Frame>
        <Slider x:Name="rotationXSlider"
                Maximum="360"
                Value="{Binding Source={x:Reference frame},
                                Path=RotationX}" />
        <Label Text="{Binding Source={x:Reference rotationXSlider},
                              Path=Value,
                              StringFormat='RotationX = {0:F0}'}"
               HorizontalTextAlignment="Center" />
        <Slider x:Name="rotationYSlider"
                Maximum="360"
                Value="{Binding Source={x:Reference frame},
                                Path=RotationY}" />
        <Label Text="{Binding Source={x:Reference rotationYSlider},
                              Path=Value,
                              StringFormat='RotationY = {0:F0}'}"
               HorizontalTextAlignment="Center" />
        <Slider x:Name="rotationZSlider"
                Maximum="360"
                Value="{Binding Source={x:Reference frame},
                                Path=Rotation}" />
        <Label Text="{Binding Source={x:Reference rotationZSlider},
                              Path=Value,
                              StringFormat='Rotation(Z) = {0:F0}'}"
               HorizontalTextAlignment="Center" />
        <StackLayout Orientation="Horizontal"
                     HorizontalOptions="Center">
            <Stepper x:Name="anchorXStepper"
                     Minimum="-1"
                     Maximum="2"
                     Increment="0.25"
                     Value="{Binding Source={x:Reference frame},
                                     Path=AnchorX}" />
            <Label Text="{Binding Source={x:Reference anchorXStepper},
                                  Path=Value,
                                  StringFormat='AnchorX = {0:F2}'}"
                   VerticalOptions="Center"/>
        </StackLayout>
        <StackLayout Orientation="Horizontal"
                     HorizontalOptions="Center">
            <Stepper x:Name="anchorYStepper"
                     Minimum="-1"
                     Maximum="2"
                     Increment="0.25"
                     Value="{Binding Source={x:Reference frame},
                                     Path=AnchorY}" />
            <Label Text="{Binding Source={x:Reference anchorYStepper},
                                  Path=Value,
                                  StringFormat='AnchorY = {0:F2}'}"
                   VerticalOptions="Center"/>
        </StackLayout>
    </StackLayout>
</ContentPage>

这是一个示例屏幕,显示所有三个旋转的组合:
2019_01_22_102124
您会发现AnchorY属性影响RotationX但不影响RotationY。对于默认的AnchorY值0.5,RotationX会导致在可视对象的水平中心周围发生旋转。将AnchorY设置为0时,旋转位于对象顶部附近,对于值1,旋转位于底部附近。
同样,AnchorX属性会影响RotationY但不会影响RotationX。 AnchorX值为0会导致RotationY围绕其左边缘旋转可视对象,而值为1会导致围绕右边缘旋转。
三个平台的旋转方向是一致的,但最好结合三维坐标系的惯例进行描述:
您可能认为有许多方法可以排列正交的X,Y和Z轴。例如,X的增加值可能对应于X轴上的向左或向右移动而增加,并且Y的增加值可能对应于Y轴上的向上或向下移动。然而,当从不同方向观察轴时,许多这些变化变得相同。实际上,只有两种不同的方式来排列X,Y和Z轴。这两种方式称为右手和左手坐标系。
Xamarin.Forms中的三个旋转属性所暗示的3D坐标系统是左手:如果您将左手的食指指向增加X坐标(向右)的方向,并且您的中指朝向增加的方向Y坐标(向下),然后你的拇指指向增加Z坐标的方向,这些坐标是从屏幕出来的。
您的左手也可用于预测旋转方向:要围绕特定轴旋转,请先将拇指指向该轴上增加值的方向。要围绕X轴旋转,请将左拇指指向右侧。要围绕Y轴旋转,请将左手拇指向下。要围绕Z轴旋转,请将左拇指指向屏幕外。左手其他手指的卷曲表示正角度的旋转方向。
综上所述:

  • 为了增加RotationX的角度,顶部会返回,底部会出现。
  • 为了增加RotationY的角度,右侧向后,左侧出现。
  • 为增加旋转角度,旋转方向为顺时针方向。

除了这些约定之外,RotationX和RotationY在三个平台之间没有太多的视觉一致性。尽管所有三个平台都实现了透视 - 即,看似最接近视图的对象部分比远离对象的部分大 - 您将看到的透视量是特定于平台的。没有可以允许微调这些视觉效果的AnchorZ属性。
但最明显的是,这些不同的旋转属性对于动画来说会非常有趣。

目录
相关文章
|
5月前
|
算法 C语言
一文搞懂:一文教你快速搞懂速度曲线规划之S形曲线(超详细+图文+推导+附件代码)
一文搞懂:一文教你快速搞懂速度曲线规划之S形曲线(超详细+图文+推导+附件代码)
173 0
一文搞懂:一文教你快速搞懂速度曲线规划之S形曲线(超详细+图文+推导+附件代码)
|
vr&ar 图形学
【Unity3D 灵巧小知识点】☀️ | Unity 四元数、欧拉角 与 方向向量 之间转换
Unity 小科普 老规矩,先介绍一下 Unity 的科普小知识: Unity是 实时3D互动内容创作和运营平台 。 包括游戏开发、美术、建筑、汽车设计、影视在内的所有创作者,借助 Unity 将创意变成现实。
|
JavaScript Android开发 索引
第二十一章:变换(十二)
这两个问题都在非最小的BoxViewClock中得到解决。 XAML文件与MinimalBoxViewClock非常相似,但代码隐藏文件更为广泛。 它以名为HandParams的小结构开始,该结构定义每只手相对于半径的大小,但也包括偏移值。
1082 0
|
JavaScript Android开发
第二十一章:变换(十一)
模拟时钟用于图形用户界面的经典示例程序之一是模拟时钟。 BoxView再一次为时钟之手进行救援。 必须根据当前时间的小时,分钟和秒旋转这些BoxView元素。让我们首先使用名为AnalogClockViewModel的类来处理旋转数学,该类包含在Xamarin.
1094 0
|
Android开发
第二十一章:变换(十三)
垂直滑块?某些观点是否可以轮换并仍然可以正常工作? 更具体地说,Xamarin.Forms的普通水平Slider元素可以旋转成垂直滑块吗?我们来试试吧。 VerticalSliders程序在StackLayout中包含三个滑块,StackLayout本身逆时针旋转90度: <ContentPage xmlns="http://xamarin.
815 0
|
Android开发 索引
第二十一章:变换(十)
样式通过将AnchorX值设置为0来结束,该值将旋转中心设置为每个Label的左边缘的垂直中心。 然后每个Label都会获得一个独特的旋转设置:显然,选择“ROTATE”字符串之前的空格,以便R的垂直条组合形成一个看起来几乎像圆的16边多边形。
1043 0
|
JavaScript Android开发 索引
第二十一章:变换(九)
旋转的文字效果轮换很有趣。 旋转动画时更有趣(正如您将在下一章中看到的那样),但即使使用静态图像也很有趣。本章和下一章中的几个旋转示例涉及将视觉元素排列在一个圆圈中,所以让我们首先尝试显示一个简单的圆圈。
877 0
|
Android开发
第二十一章:变换(八)
旋转变换 “旋转”属性旋转屏幕表面上的可视元素。 将“旋转”属性设置为以度为单位的角度(不是弧度)。 正角度顺时针旋转元素。 您可以将“旋转”设置为小于0或大于360的角度。实际旋转角度是旋转属性模数360的值。
839 0
|
Android开发 iOS开发
第二十一章:变换(七)
锚定规模当你尝试使用Scale属性时,你可能已经注意到视觉元素的任何扩展都是从元素的中心向外发生的,如果你将视觉元素缩小到任何东西,它也会向中心收缩。这是另一种思考方式:无论Scale属性的设置如何,视觉元素正中心的点都保持在同一位置。
965 0
|
Android开发 iOS开发 Windows
第二十一章:变换(六)
两个按钮的Clicked处理程序每个都启动一个独立的动画。 第一个Button的Clicked处理程序将其Scale属性从1设置为5并再次返回,而第二个Button的Clicked处理程序将其FontSize属性设置为1到5的比例因子,然后再返回。
964 0