news 2026/6/7 14:11:15

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/5 18:57:45

4、Windows XP基础操作指南

Windows XP基础操作指南 1. 窗口基础部件解析 Windows XP的窗口包含多种部件,熟悉这些部件能帮助我们更高效地使用系统。以下是对常见窗口部件的详细介绍: - 标题栏 :位于窗口顶部,显示当前运行的程序和正在处理的文件名称。例如,在记事本程序中,如果文件未保存命名…

作者头像 李华
网站建设 2026/6/6 3:27:27

5、Windows 文件与存储管理全攻略

Windows 文件与存储管理全攻略 在使用 Windows 系统时,文件和文件夹的管理是一项基础且关键的技能。它就像整理现实中的文件柜一样,能够让你的工作和生活更加有序。下面将详细介绍如何在 Windows 中进行文件和文件夹的管理,以及如何使用各种存储设备。 1. 了解“我的电脑”…

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

19、Windows XP使用帮助与常见问题解决指南

Windows XP使用帮助与常见问题解决指南 快速获取帮助 在使用Windows XP时,有时你能轻松获得系统的帮助,有时却会陷入困境,得不到明确答案。以下是一些快速获取有用信息的方法: 1. 按下F1键 :当你在Windows XP中感到困惑时,按下F1键或者从开始菜单中选择“帮助和支持…

作者头像 李华
网站建设 2026/6/5 11:52:18

Excalidraw如何防止敏感信息截图泄露?水印+权限双重防护

Excalidraw如何防止敏感信息截图泄露&#xff1f;水印权限双重防护 在企业数字化协作日益深入的今天&#xff0c;一张随手分享的白板截图&#xff0c;可能就包含了尚未发布的系统架构、核心业务流程或商业战略蓝图。这类信息一旦外泄&#xff0c;轻则造成内部混乱&#xff0c;重…

作者头像 李华
网站建设 2026/6/7 12:18:12

Excalidraw模板库推荐:节省80%的绘图时间

Excalidraw模板库推荐&#xff1a;节省80%的绘图时间 在技术团队频繁进行系统设计、架构评审和需求对齐的今天&#xff0c;一张清晰明了的图表往往比千言万语更有效。但现实是&#xff0c;很多人一想到“画图”就头疼——不是不会画&#xff0c;而是每次都要从头开始排布矩形、…

作者头像 李华
网站建设 2026/6/4 20:09:08

Excalidraw新增团队成员角色权限矩阵表

Excalidraw 团队协作权限体系的演进与实践 在现代分布式团队中&#xff0c;一个看似简单的“画图”行为背后&#xff0c;往往牵涉复杂的协作规则和安全边界。当产品经理在白板上勾勒产品原型时&#xff0c;他可能不希望开发人员随意删改核心流程&#xff1b;当架构师绘制系统拓…

作者头像 李华