news 2026/6/12 18:36:19

WPF Matrix结构体方法ScaleAt的坐标系

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
WPF Matrix结构体方法ScaleAt的坐标系

代码:

namespace MatrixTransformTest { /// <summary> /// MainWindow.xaml 的交互逻辑 /// </summary> public partial class MainWindow : Window { private MatrixTransform buttonTransform; public MainWindow() { InitializeComponent(); InitializeButtonTransform(); } private void MyButton_OnClick(object sender, RoutedEventArgs e) { Debug.WriteLine("=== 点击button1 ==="); Debug.WriteLine($"缩放前矩阵: {MatrixToString(buttonTransform.Matrix)}"); Matrix matrix = buttonTransform.Matrix; matrix.ScaleAt(1.1, 1.1, 100, 100); Debug.WriteLine($"缩放后矩阵: {MatrixToString(matrix)}"); Debug.WriteLine($"中心点(100,100)变换后: {matrix.Transform(new Point(100, 100))}"); buttonTransform.Matrix = matrix; } private void InitializeButtonTransform() { // 创建并初始化MatrixTransform buttonTransform = new MatrixTransform(); myButton.RenderTransform = buttonTransform; // 设置初始变换 ResetTransform(); } private void ResetTransform() { // 重置为单位矩阵(无变换) buttonTransform.Matrix = Matrix.Identity; } private void MyButton2_OnClick(object sender, RoutedEventArgs e) { Debug.WriteLine("=== 点击button2 ==="); Debug.WriteLine($"缩放前矩阵: {MatrixToString(buttonTransform.Matrix)}"); Matrix matrix = buttonTransform.Matrix; matrix.ScaleAt(1.1, 1.1, 0, 0); Debug.WriteLine($"缩放后矩阵: {MatrixToString(matrix)}"); buttonTransform.Matrix = matrix; } private string MatrixToString(Matrix m) { return $"[{m.M11:F2},{m.M12:F2},{m.M21:F2},{m.M22:F2},{m.OffsetX:F2},{m.OffsetY:F2}]"; } } }

xaml:

<Window x:Class="MatrixTransformTest.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:local="clr-namespace:MatrixTransformTest" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" Title="MainWindow" Width="800" Height="450" mc:Ignorable="d"> <Grid ShowGridLines="True"> <Grid.RowDefinitions> <RowDefinition Height="200" /> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="200" /> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Button Name="myButton" Grid.Row="0" Grid.Column="0" Width="100" Height="100" HorizontalAlignment="Right" VerticalAlignment="Bottom" Content="Button1" Click="MyButton_OnClick" /> <Button Name="myButton2" Grid.Row="2" Grid.Column="0" Content="Button2" Click="MyButton2_OnClick"/> </Grid> </Window>

刚启动的界面:

如果一直点击Button1的话,Buttno1的右下角始终与Grid的行列交界重合:

因为Button1的点击事件是以坐标点(100,100)进行缩放,控件的高宽均为100,所以坐标点(100,100)就是Button1的右下角。

同理,如果一直点击Button2的话,Buttno1的左上角位置也不会发生改变:

这两种情况实际都符合设想。

同理,Button2点击事件是以(0,0)点为原点进行缩放,所以先点几下按钮1,然后点击按钮2的时候,按钮1的左上角应该不动,视觉上是向右下方进行延申。

但是测试发现我的观点是错误的,实际情况是:先点几下按钮1,然后点击按钮2的时候按钮1的左上角也一直在动。

比如在上图基础上又点了几下按钮2:

发现按钮1的左上角也一直在偏移,这就说明我对缩放中心的理解是错的。

看一下输出:

先了解一下缩放因子:

图源:深入浅出WPF变换(Transform)之矩阵(Matrix) - 叶落劲秋 - 博客园

问题核心:ScaleAt的中心点坐标系统

关键事实

  • matrix.ScaleAt(scaleX, scaleY, centerX, centerY)中的centerX, centerY相对于当前变换后的坐标系统

  • 不是相对于按钮的局部坐标,也不是绝对的窗口坐标

  • 每次变换后,整个坐标系都在变化

分析现象

初始状态:

  • 按钮在Grid的(0,0)单元格,右下对齐

  • 按钮的局部坐标系:左上角(0,0),右下角(100,100)

  • buttonTransform.Matrix = Matrix.Identity(单位矩阵)

场景1:只点击button2

matrix.ScaleAt(1.1, 1.1, 0, 0);
  1. 第1次点击

    • 当前矩阵是单位矩阵[1,0,0,1,0,0]

    • 以(0,0)为中心放大1.1倍

    • 新矩阵:[1.1,0,0,1.1,0,0]

    • 按钮变大,但位置不变(OffsetX=0, OffsetY=0)

  2. 第2次点击

    • 当前矩阵:[1.1,0,0,1.1,0,0]

    • 还是以(0,0)为中心放大

    • 实际效果:以当前坐标系的原点(0,0)放大

    • 因为OffsetX和OffsetY一直是0,所以按钮位置不变

场景2:先点击button1,再点击button2

// button1: matrix.ScaleAt(1.1, 1.1, 100, 100); // button2: matrix.ScaleAt(1.1, 1.1, 0, 0);
  1. 第1次点击button1

    • 以(100,100)为中心放大1.1倍

    • 矩阵从[1,0,0,1,0,0]变为[1.1,0,0,1.1,-10,-10]

    • 为什么Offset变成(-10,-10)?

      • 公式:OffsetX = centerX * (1 - scaleX)

      • 100 * (1 - 1.1) = 100 * (-0.1) = -10

    • 按钮向左上方移动了10像素

  2. 第2次点击button2

    • 当前矩阵:[1.1,0,0,1.1,-10,-10]

    • 以(0,0)为中心放大1.1倍

    • 新的Offset计算:

      • OffsetX' = -10 * 1.1 + 0 * (1 - 1.1) = -11

      • 按钮继续向左移动

    • 每次点击都向左上移动更多

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/12 20:45:58

Excalidraw手绘风格背后的渲染技术原理剖析

Excalidraw手绘风格背后的渲染技术原理剖析 在数字协作日益深入的今天&#xff0c;一张草图可能比十页文档更能激发团队的共鸣。尤其是在远程会议、系统设计或产品原型讨论中&#xff0c;可视化表达早已不是“锦上添花”&#xff0c;而是沟通效率的核心杠杆。然而&#xff0c;…

作者头像 李华
网站建设 2026/6/11 10:00:14

5、Windows XP 文件与网络操作全攻略

Windows XP 文件与网络操作全攻略 1. 添加网络位置 在 Windows XP 中,若要添加网络位置的快捷方式到“网上邻居”窗口,可按以下步骤操作: 1. 确保在“服务提供商”列表框中,“其他网络连接”“指定网站地址、网络位置或 FTP 站点”处于高亮状态,然后点击“下一步”按钮…

作者头像 李华
网站建设 2026/6/10 18:20:38

夸克网盘加速_下载提速

今天教大家一招能解决夸克网盘限制的在线工具。这个工具也是完全免费使用的。下面让大家看看我用这个工具的下载速度咋样。地址获取&#xff1a;放在这里了&#xff0c;可以直接获取 这个速度还是不错的把。对于平常不怎么下载的用户还是很友好的。下面开始今天的教学 输入我给…

作者头像 李华
网站建设 2026/6/5 21:56:05

11、Windows XP 使用指南:打印、搜索与菜单操作全解析

Windows XP 使用指南:打印、搜索与菜单操作全解析 一、打印机的使用与切换 在将打印机添加到计算机后,你就可以在使用诸如 Word 2003 和 Excel 2003 等程序进行打印,或者直接从 Windows 进行打印时使用它。 若要在 Word 和 Excel 等程序中切换到未设为默认打印机的新打印…

作者头像 李华
网站建设 2026/6/5 21:44:14

16、利用 Internet Explorer 6 浏览器畅享网络世界

利用 Internet Explorer 6 浏览器畅享网络世界 在当今数字化时代,网络已成为我们获取信息、娱乐和交流的重要工具。而 Internet Explorer 6 浏览器作为一款经典的浏览器,为我们提供了便捷的网络浏览体验。下面将详细介绍如何使用 Internet Explorer 6 浏览器进行网页浏览、保…

作者头像 李华
网站建设 2026/6/10 9:42:49

3、Windows XP 操作全指南:从登录到关机

Windows XP 操作全指南:从登录到关机 1. 开启 Windows XP 之旅 启动 Windows XP 就像打开电脑一样简单,它会以一种充满未来感的方式自动跃入屏幕。不过,在开始工作之前,你可能会遇到那个蓝色的欢迎屏幕,你需要通过点击用户名来登录。 如果你在欢迎屏幕上没有看到自己的…

作者头像 李华