Windows Store App 旋轉中心

標籤：

旋轉中心的位置可以通過設定CenterOfRotationX、CenterOfRotationY和CenterOfRotationZ屬性來指定。CenterOfRotationX和CenterOfRotationY屬性的預設值都是0.5，表示旋轉軸正好位於旋轉對象的中心。當這兩個屬性值為0和1時，表示旋轉中心處在旋轉對象的一組對邊上，即將旋轉中心移到旋轉對象的外邊沿，旋轉對象將會繞其外邊沿旋轉。當這兩個屬性值的範圍在0和1之間時，表示旋轉中心處於旋轉對象的特定位置，若超出這個範圍，則根據超出值大小相應的將旋轉中心移出旋轉對象。CenterOfRotationZ屬性的預設值是0，表示旋轉中心在旋轉對象的中心，可以對其賦正值或負值，使旋轉中心移到旋轉對象的正面或背面。

通過設定CenterOfRotationX屬性值可以將旋轉中心沿X軸並平行於Y軸移動，同理通過設定CenterOfRotationY屬性值可以將旋轉中心沿Y軸並平行於X軸移動。下面看一下不同的CenterOfRotationY屬性值對3D效果的影響，10-10所示。

 CenterOfRotationY = "0.5" (預設值)                        CenterOfRotationY = "0.1"

圖10-10 CenterOfRotationY屬性效果

接下來介紹如何改變CenterOfRotationX的屬性值移動旋轉中心，從而使介面元素繞著指定的旋轉中心進行旋轉。

啟動Visual Studio 2012，建立一個Windows市集的空白應用程式項目，將其命名為3DCenterOfRotationApp，首先在項目的Assets檔案夾下添加一個名為“Windows 8.png”的圖片，雙擊開啟此頁面的3DCenterOfRotationApp.xaml檔案，使用如下代碼替換原有的Grid元素。

<Grid Background="Gray">

    <StackPanel  Width="240" Height="240" Background="White" >

        <Image  Width="240" Height="240" Source="/Assets/Windows 8.png">

            <Image.Projection>

                <PlaneProjection CenterOfRotationX="0.9" RotationY="45"/>

</Image.Projection>

        </Image>

    </StackPanel>

</Grid>

上面的代碼與之前介紹的範例程式碼類似，不同的是本樣本把PlaneProjection元素的CenterOfRotationX屬性值設定為0.9，表示將旋轉中心沿X軸並平行於Y軸向右移動到圖片的右邊緣，接著將RotationY屬性值設定為45度，這樣圖片將繞Y軸順時針旋轉45度。

按下F5運行程式，會產生10-11所示的3D效果。

 

圖10-11 繞指定旋轉中心旋轉的3D

由於旋轉中心的設定很類似這裡僅以CenterOfRotationX屬性為例進行了講解，有興趣的讀者可以在上面樣本的基礎上修改PlaneProjection的屬性值，感受不同的3D效果。

Windows Store App 旋轉中心