zoukankan      html  css  js  c++  java
  • 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如何设置,几何图形旋转的角度都一样的,只是旋转后的位置不同

  • 相关阅读:
    一个2核1G内存的服务器能做什么
    产品能力是一种底层能力
    利用容器逃逸实现远程登录k8s集群节点
    边缘计算k8s集群SuperEdge初体验
    LeetCode
    RSA加密
    RSA加密
    LeetCode
    LeetCode
    双端队列
  • 原文地址:https://www.cnblogs.com/cappuccino/p/2586616.html
Copyright © 2011-2022 走看看