RotateTransform与三角函数不匹配，Canvas对象错位问题排查

安全阿岳

2026-6-23

WPF Canvas 三角函数旋转与 RotateTransform 结果不匹配问题排查

我找不到获取Canvas中已应用变换对象绝对位置的有效方法，于是尝试通过对一个点应用与目标对象相同的变换，再根据该点坐标判断操作时机。但用三角函数公式实现旋转时，和RotateTransform函数的结果不匹配：Canvas里的对象不仅错位，公式计算出的圆形轨迹还变形了。

我绘制了中心十字线，用RotateTransform生成的蓝色椭圆（每次递增45度旋转）位置正确，但用三角函数计算的红色椭圆不仅错位，旋转速率也不符合预期。实现逻辑如下：

循环累加角度：0、45、90…
三个关键点：Canvas中心、沿Y轴平移半径距离的点、经旋转后用于绘制红色椭圆的点
蓝色椭圆使用包含TranslateTransform和RotateTransform的TransformGroup

原始代码

XAML 代码

<Window x:Class="Angle.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Angle"
        mc:Ignorable="d"
        Title="MainWindow" Height="520" Width="520">
    <Canvas Grid.Row ="0" x:Name="cv" Width="500" Height="500"></Canvas>
</Window>

C# 代码

using System.Windows;
using System.Windows.Media;
using System.Windows.Shapes;

namespace Angle
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            int    increment = 45,
                   segments  = 360 / increment;
            double radius    = 150.0,
                   angle     = 0.0;

            Point origin;
            origin.X = cv.Width / 2;
            origin.Y = cv.Height / 2;

            Line verLine = new Line() { X1 = origin.X, X2 = origin.X, Y1 = 0, Y2 = cv.Height },
                 hrzLine = new Line() { X1 = 0, X2 = cv.Width, Y1 = origin.Y, Y2 = origin.Y };

            verLine.Stroke = hrzLine.Stroke = Brushes.Black;
            verLine.StrokeThickness = hrzLine.StrokeThickness = 1;

            cv.Children.Add(verLine);
            cv.Children.Add(hrzLine);

            for (int i = 0; i < segments; i++)
            {
                Point translated, rotated;

                Ellipse usingMath      = new Ellipse() { Width = 20, Height = 20 },
                        usingTransform = new Ellipse() { Width = 20, Height = 20 };

                translated.X = origin.X;
                translated.Y = origin.Y + radius;
                rotated.X = (Math.Cos(angle * Math.PI / 180) * (translated.X - origin.X) - Math.Sin(angle * Math.PI / 180) * (translated.Y - origin.Y) + origin.X);
                rotated.Y = (Math.Sin(angle * Math.PI / 180) * (translated.X - origin.X) + Math.Cos(angle * Math.PI / 180) * (translated.Y - origin.Y) + origin.Y);
                usingMath.RenderTransform   = new TranslateTransform() { X = rotated.X, Y = rotated.Y };

                TransformGroup transf = new TransformGroup();
                transf.Children.Add(new TranslateTransform() { X = translated.X, Y = translated.Y });
                transf.Children.Add(new RotateTransform()    { Angle = angle, CenterX = origin.X, CenterY = origin.Y });
                usingTransform.RenderTransform = transf;

                usingMath.StrokeThickness = usingTransform.StrokeThickness = 4;
                usingMath.Stroke      = Brushes.Red;
                usingTransform.Stroke = Brushes.Blue;
                
                cv.Children.Add(usingMath);
                cv.Children.Add(usingTransform);

                angle += increment;
            }
        }
    }
}

错误原因分析

变换原点不一致：WPF中RenderTransform默认以元素自身左上角为变换基准点，手动计算的是点的绝对坐标，直接赋值给TranslateTransform会让红色椭圆的左上角定位到该点；而蓝色椭圆的变换是绕Canvas中心旋转，两者的位置基准完全不同。
变换顺序不匹配：TransformGroup按添加顺序应用变换（先平移，再旋转），但手动计算是先对translated点旋转，再把结果作为平移目标，相当于先旋转后平移，和蓝色椭圆的变换顺序相反，导致位置偏差。
元素中心未对齐：蓝色椭圆的平移操作是把左上角放到translated点，而实际期望的是让椭圆中心对齐该点，进一步放大了错位问题。

修正后的代码

using System.Windows;
using System.Windows.Media;
using System.Windows.Shapes;

namespace Angle
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            int increment = 45,
                segments = 360 / increment;
            double radius = 150.0,
                   angle = 0.0;

            Point origin;
            origin.X = cv.Width / 2;
            origin.Y = cv.Height / 2;

            Line verLine = new Line() { X1 = origin.X, X2 = origin.X, Y1 = 0, Y2 = cv.Height },
                 hrzLine = new Line() { X1 = 0, X2 = cv.Width, Y1 = origin.Y, Y2 = origin.Y };

            verLine.Stroke = hrzLine.Stroke = Brushes.Black;
            verLine.StrokeThickness = hrzLine.StrokeThickness = 1;

            cv.Children.Add(verLine);
            cv.Children.Add(hrzLine);

            // 椭圆的半宽高，用于对齐中心
            double ellipseHalfSize = 20 / 2.0;

            for (int i = 0; i < segments; i++)
            {
                Point translated, rotated;

                Ellipse usingMath = new Ellipse() { Width = 20, Height = 20 },
                        usingTransform = new Ellipse() { Width = 20, Height = 20 };

                translated.X = origin.X;
                translated.Y = origin.Y + radius;

                // 修正蓝色椭圆的变换：让椭圆中心对齐translated点
                TransformGroup transf = new TransformGroup();
                transf.Children.Add(new TranslateTransform() 
                { 
                    X = translated.X - ellipseHalfSize, 
                    Y = translated.Y - ellipseHalfSize 
                });
                transf.Children.Add(new RotateTransform() 
                { 
                    Angle = angle, 
                    CenterX = origin.X, 
                    CenterY = origin.Y 
                });
                usingTransform.RenderTransform = transf;

                // 手动模拟相同的变换顺序：先平移，再旋转
                // 1. 先计算平移后的左上角位置（中心对齐translated）
                Point translatePoint = new Point(
                    translated.X - ellipseHalfSize, 
                    translated.Y - ellipseHalfSize
                );
                // 2. 将该点绕origin旋转angle度
                double radian = angle * Math.PI / 180;
                rotated.X = Math.Cos(radian) * (translatePoint.X - origin.X) 
                          - Math.Sin(radian) * (translatePoint.Y - origin.Y) 
                          + origin.X;
                rotated.Y = Math.Sin(radian) * (translatePoint.X - origin.X) 
                          + Math.Cos(radian) * (translatePoint.Y - origin.Y) 
                          + origin.Y;
                // 3. 红色椭圆平移到旋转后的左上角位置
                usingMath.RenderTransform = new TranslateTransform() 
                { 
                    X = rotated.X, 
                    Y = rotated.Y 
                };

                usingMath.StrokeThickness = usingTransform.StrokeThickness = 4;
                usingMath.Stroke = Brushes.Red;
                usingTransform.Stroke = Brushes.Blue;

                cv.Children.Add(usingMath);
                cv.Children.Add(usingTransform);

                angle += increment;
            }
        }
    }
}

修正说明

对齐变换基准：给蓝色椭圆的TranslateTransform减去椭圆半宽高，让椭圆中心对齐translated点，和手动计算的位置基准统一。
匹配变换顺序：手动计算时先模拟平移操作（得到元素左上角的平移后位置），再对该点执行绕Canvas中心的旋转，完全复刻TransformGroup的变换顺序。
统一位置逻辑：红色椭圆的TranslateTransform直接使用旋转后的左上角坐标，确保和蓝色椭圆的最终位置完全一致。

内容的提问来源于stack exchange，提问作者JayY

RotateTransform与三角函数不匹配，Canvas对象错位问题排查

原始代码 #

XAML 代码 #

C# 代码 #

错误原因分析 #

修正后的代码 #