Wpf RotateTransform CenterX CenterY小結

 <Canvas>
        <!-- 原圖 -->
        <Rectangle Stroke="Black" Width="100" Height="50" Canvas.Left="250" Canvas.Top="50" />

     

        <!-- 繞矩形左上角點（0， 0）點旋轉，注意是矩形坐標系 -->
        <Rectangle Stroke="Green" Width="100" Height="50" Canvas.Left="250" Canvas.Top="50">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="90" CenterX="50" CenterY="25" />
            </Rectangle.RenderTransform>
        </Rectangle>

        <!-- 繞矩形中心點（50， 25）點旋轉，注意是矩形坐標系 -->
        <Rectangle Stroke="Green" Width="100" Height="50" Canvas.Left="250" Canvas.Top="50">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="90" CenterX="50" CenterY="25" />
            </Rectangle.RenderTransform>
        </Rectangle>

        <!-- 繞矩形中心點（50， 150）點旋轉，注意是矩形坐標系，也是Canvas坐標系的中心點（300， 225） -->
        <Rectangle Stroke="BlueViolet" Width="100" Height="50" Canvas.Left="250" Canvas.Top="50" RenderTransformOrigin="0,0">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="90" CenterX="50" CenterY="150" />
            </Rectangle.RenderTransform>
        </Rectangle>

        <Path Stroke="Black" StrokeThickness="4">
            <Path.Data>
                <LineGeometry StartPoint="250,50" EndPoint="300,200"></LineGeometry>
            </Path.Data>
        </Path>
        <Ellipse Width="5" Height="5" Fill="Red" Canvas.Left="300" Canvas.Top="200"></Ellipse>
        <!-- 繞矩形中心點（50， 150）點旋轉，注意是矩形坐標系，也是Canvas坐標系的中心點（300， 225） -->
        <Rectangle Stroke="GreenYellow" Width="100" Height="50" Canvas.Left="250" Canvas.Top="50">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="180" CenterX="50" CenterY="150" />
            </Rectangle.RenderTransform>
        </Rectangle>

        <!-- 繞矩形中心點（50， 150）點旋轉，注意是矩形坐標系，也是Canvas坐標系的中心點（300， 225） -->
        <Rectangle Stroke="SaddleBrown" Width="100" Height="50" Canvas.Left="250" Canvas.Top="50">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="270" CenterX="50" CenterY="150" />
            </Rectangle.RenderTransform>
        </Rectangle>
    </Canvas>

 

如圖，如果Rectangle的RenderTransformOrigin="0,0" CenterX=50 CenteY=150就是圍繞着紅點為中心，黃線為半徑將黃線另一頭的點選擇相應的角度，如果RenderTransformOrigin！="0,0"則則以紅點和RenderTransformOrigin連起來的線為半徑旋轉相應的角度 （注意RenderTransformOrigin="0,0" CenterX=50 CenteY=150的點的位置都是相對於其所在的Rectangle 的）

 

 

<Rectangle Stroke="Black" Width="50" Height="50">
           
        </Rectangle>
        <Rectangle Stroke="Black" Width="50" Height="50">
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <RotateTransform Angle="10" CenterX="50" CenterY="50"></RotateTransform>
                </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="test" Stroke="Black" Width="50" Height="50">
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <TranslateTransform X="50"></TranslateTransform>
                    <RotateTransform Angle="10" CenterX="50" CenterY="50"></RotateTransform>
                </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>

由這個例子中test矩形得知無論 

 <TranslateTransform X="50"></TranslateTransform>如何設置CenterX和CenterY都是以沒改變前的圖為標准的

其實不管CenterX Center如何設置，幾何圖形旋轉的角度都一樣的，只是旋轉后的位置不同