《Practical WPF Charts and Graphics 》翻译——之十一

矩阵操作

WPF里的Matrix结构提供了进行旋转，拉伸和平移的方法。它也实现了一些进行矩阵操作的方法。例如，你也可以使用Invert方法来得到一个可逆矩阵的逆。这个方法没有参数。Multiply方法将两个矩阵相乘并返回一个新矩阵作为结果。下面是一些矩阵操作常用的方法:

•  Scale—添加一个指定的拉伸向量到Matrix结构
•  ScaleAt—将矩阵关于指定点拉伸到指定大小
•  Translate—添加一个指定偏移量的平移到到Matrix结构
•  Rotate—应用一个关于原点的指定角度的旋转到Matrix结构
•  RotateAt—关于指定的点旋转矩阵
•  Skew—在X和Y方向增加一个制定的倾斜角度给Matrix结构
•  Invert—求Matrix结构的逆矩阵
•  Multiply—用另一个Matrix结构乘以一个Matrix结构
•  Transform—通过矩阵变换特定的点，点数组，向量，或者向量数组

另外还有和Scale,Translation,Rotation和Skew相关的Prepend方法。缺省的方法是Append。Append和Prepend都决定了矩阵顺序。Append指定新的操作在前一个操作的后面应用；Prepend指定新操作在前一个操作的前面。

让我们考虑一个展示WPF里矩阵操作的例子。创建一个新的WPF windows应用程序项目，命名为Transformation2D。添加一个叫MatrixOperations的WPF window到项目中。这里是例子的XAML文件：

<Window x:Class="Transformation2D.MatrixOperations"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     Title="Matrix Operations" Height="250" Width="250">     <Grid>         <StackPanel>             <TextBlock Margin="10,10,5,5" Text="Original Matrix:"/>                    <TextBlock x:Name="tbOriginal" Margin="20,0,5,5"/>             <TextBlock Margin="10,0,5,5" Text="Inverted Matrix:"/>             <TextBlock x:Name="tbInvert" Margin="20,0,5,5"/>             <TextBlock Margin="10,0,5,5" Text="Original Matrices:"/>             <TextBlock x:Name="tbM1M2" Margin="20,0,5,5"/>             <TextBlock Margin="10,0,5,5" Text="M1 x M2:"/>             <TextBlock x:Name="tbM12" Margin="20,0,5,5"/>             <TextBlock Margin="10,0,5,5" Text="M2 x M1:"/>             <TextBlock x:Name="tbM21" Margin="20,0,5,5"/>         </StackPanel>     </Grid> </Window> 

这个标记文件创建了一个使用TextBlocks显示结果的布局。矩阵操作的结果展示在相关的后台文件中，如下：

using System; using System.Windows; using System.Windows.Media;  namespace Transformation2D {     public partial class MatrixOperations : Window     {         public MatrixOperations()         {             InitializeComponent();              // Invert matrix:             Matrix m = new Matrix(1, 2, 3, 4, 0, 0);             tbOriginal.Text = "(" +  m.ToString() +")";             m.Invert();             tbInvert.Text = "(" + m.ToString() + ")";              // Matrix multiplication:             Matrix m1 = new Matrix(1, 2, 3, 4, 0, 1);             Matrix m2 = new Matrix(0, 1, 2, 1, 0, 1);             Matrix m12 = Matrix.Multiply(m1, m2);             Matrix m21 = Matrix.Multiply(m2, m1);              tbM1M2.Text = "M1 = (" + m1.ToString() + "), " +                            " M2 = (" + m2.ToString() + ")";             tbM12.Text = "(" + m12.ToString() + ")";             tbM21.Text = "(" + m21.ToString() + ")";         }     } } 

这个后台文件展示了矩阵求逆和相乘。特别地，他显示了矩阵相乘的结果依赖于矩阵操作的顺序。执行这个例子会得到如图2-5的输出。

图2-5.WPF矩阵操作的结果

首先，我们检查一下矩阵求逆方法，它求的是矩阵(1, 2, 3, 4, 0, 0)的逆。Matrix.Invert方法得到结果(-2, 1, 1.5, -0.5, 0, 0).这个可以轻易通过矩阵(1, 2, 3, 4, 0, 0) 乘以(-2, 1, 1.5, -0.5, 0, 0)来证明，结果应该等于单位矩阵(1, 0, 0, 1, 0, 0).。事实上:

这确实是单位矩阵，和期望的一样.。

接下来，我们考虑矩阵相乘。在代码里，你创建了两个矩阵m1 = (1, 2, 3, 4, 0, 1)和m2 = (0, 1, 2, 1, 0, 1)。首先用m1乘以m2返回结果到m12;然后用m2乘以m1将结果存入m21。注意如果用矩阵M1乘以m2，结果是存在m12（原文为m1,是不是错了）里。你可以从图2-5看出M12=(4, 3, 8, 7, 2, 2)。事实上：

对于M21=m2×m1，你将期望得到下面的结果：

这和图中显示的(3, 4, 5, 8, 3, 5) 是一致的。

矩阵变换

在前面部分提到，WPF里的矩阵结构也提供了选择，拉伸，和平移矩阵的方法。

你可以使用Rotate和RotateAt方法去选择矩阵。Rotate方法以一个指定的角度选择矩阵。这个方法只有一个参数：一个双精度值用来指定角度。RotateAt方法在你需要改变旋转中心的时候会有用处。它的第一个参数是角度，第二个和第三个参数（都是双精度类型）指定旋转中心。

我们用一个例子来说明WPF里的基本矩阵变换（平移，拉伸，旋转和倾斜）。添加一个新的WPF Window到Transformation2D项目中，命名为MatrixTransforms.下面是例子的XAML文件：

<Window x:Class="Transformation2D.MatrixTransforms"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     Title="Matrix Transforms" Height="450" Width="270">     <StackPanel>         <TextBlock Margin="10,10,5,5" Text="Original Matrix:"/>         <TextBlock Name="tbOriginal" Margin="20,0,5,5"/>         <TextBlock Margin="10,0,5,5" Text="Scale:"/>         <TextBlock Name="tbScale" Margin="20,0,5,5"/>         <TextBlock Margin="10,0,5,5" Text="Scale - Prepend:"/>         <TextBlock Name="tbScalePrepend" Margin="20,0,5,5"/>         <TextBlock Margin="10,0,5,5" Text="Translation:"/>         <TextBlock Name="tbTranslate" Margin="20,0,5,5"/>         <TextBlock Margin="10,0,5,5" Text="Translation – Prepend:"/>         <TextBlock Name="tbTranslatePrepend" Margin="20,0,5,5"/>         <TextBlock Margin="10,0,5,5" Text="Rotation:"/>         <TextBlock Name="tbRotate" Margin="20,0,5,5" TextWrapping="Wrap"/>         <TextBlock Margin="10,0,5,5" Text="Rotation – Prepend:"/>         <TextBlock Name="tbRotatePrepend" Margin="20,0,5,5" TextWrapping="Wrap"/>         <TextBlock Margin="10,0,5,5" Text="RotationAt:"/>         <TextBlock x:Name="tbRotateAt" Margin="20,0,5,5" TextWrapping="Wrap"/>         <TextBlock Margin="10,0,5,5" Text="RotationAt – Prepend:"/>         <TextBlock x:Name="tbRotateAtPrepend" Margin="20,0,5,5"                     TextWrapping="Wrap"/>         <TextBlock Margin="10,0,5,5" Text="Skew:"/>         <TextBlock Name="tbSkew" Margin="20,0,5,5"/>         <TextBlock Margin="10,0,5,5" Text="Skew - Prepend:"/>         <TextBlock Name="tbSkewPrepend" Margin="20,0,5,5"/>     </StackPanel> </Window> 

这个标记文件使用TextBlocks创建了一个显示结果的布局，他们被嵌入到StackPanel里。相关的后台代码如下：

namespace Transformation2D {     public partial class MatrixTransforms : Window     {         public MatrixTransform()         {             InitializeComponent();              // Original matrix:             Matrix m = new Matrix(1, 2, 3, 4, 0, 1);             tbOriginal.Text = "(" + m.ToString() + ")";              //Scale:             m.Scale(1, 0.5);             tbScale.Text = "(" + m.ToString() + ")";              // Scale - Prepend:             m = new Matrix(1, 2, 3, 4, 0, 1);             m.ScalePrepend(1, 0.5);             tbScalePrepend.Text = "(" + m.ToString() + ")";              //Translation:             m = new Matrix(1, 2, 3, 4, 0, 1);             m.Translate(1, 0.5);             tbTranslate.Text = "(" + m.ToString() + ")";              // Translation - Prepend:             m = new Matrix(1, 2, 3, 4, 0, 1);             m.TranslatePrepend(1, 0.5);             tbTranslatePrepend.Text =                     "(" + m.ToString() + ")";       //Rotation:             m = new Matrix(1, 2, 3, 4, 0, 1);             m.Rotate(45);             tbRotate.Text = "(" + MatrixRound(m).ToString()                              + ")";              // Rotation - Prepend:             m = new Matrix(1, 2, 3, 4, 0, 1);             m.RotatePrepend(45);             tbRotatePrepend.Text = "(" + MatrixRound(m).ToString() + ")";              //Rotation at (x = 1, y = 2):             m = new Matrix(1, 2, 3, 4, 0, 1);             m.RotateAt(45, 1, 2);             tbRotateAt.Text = "(" + MatrixRound(m).ToString() + ")";             // Rotation at (x = 1, y = 2) - Prepend:             m = new Matrix(1, 2, 3, 4, 0, 1);             m.RotateAtPrepend(45, 1, 2);             tbRotateAtPrepend.Text = "(" + MatrixRound(m).ToString() + ")";              // Skew:             m = new Matrix(1, 2, 3, 4, 0, 1);             m.Skew(45, 30);             tbSkew.Text = "(" + MatrixRound(m).ToString() + ")";              // Skew - Prepend:             m = new Matrix(1, 2, 3, 4, 0, 1);             m.SkewPrepend(45, 30);             tbSkewPrepend.Text = "(" + MatrixRound(m).ToString() + ")";         }          private Matrix MatrixRound(Matrix m)         {             m.M11 = Math.Round(m.M11, 3);             m.M12 = Math.Round(m.M12, 3);             m.M21 = Math.Round(m.M21, 3);             m.M22 = Math.Round(m.M22, 3);             m.OffsetX = Math.Round(m.OffsetX, 3);             m.OffsetY = Math.Round(m.OffsetY, 3);             return m;         }     } } 

生成并运行这个应用程序得到如图2-6的输出：

原始的矩阵，m= (1, 2, 3, 4, 0, 1)，被进行了各种变换。首先，我们检查拉伸变换，它设定X方向的拉伸系数为1，Y方向为0.5。对于Append拉伸（默认设置），我们得到

这和图2-6显示的结果(1, 1, 3, 2, 0, 0.5)是一样的。另一方面，对于Prepend拉伸，我们得到

这证实了图2-6显示的结果(1, 1, 3, 2, 0, 0.5)。

我们接下来在X方向平移矩阵m一个单位，在Y方向平移一半的单位。对于Append（默认设置）平移，我们得到：

这和图2-6显示的结果(1, 2, 3, 4, 1, 1.5) 一致。

对于Prepend平移，我们进行下面的变换：

它证实了图2-6显示的结果(1, 2, 3, 4, 2.5, 5)。

对于旋转变换，原始矩阵被m旋转45度。在Append选择的情况下，我们得到

注意在前面的计算中，我们使用了 cos(π/4) = sin(π/4) = 0.707。这和图2-6给出的结果一样( -0.707, 2.121,  -0.707, 4.95, -0.707, 0.707) 。

对于Prepend旋转，我们得到

这个结果和图2-6中显示的(2.828, 4.243, 1.414, 1.414, 0, 1)一致。

RotateAT方法被设计用在你需要改变旋转中心的情况。事实上，Rotate方法是RotateAt方法的一个特例，它的选转中心是（0,0）。在这个例子里，矩阵m响度点（1,2）旋转了45度。正如本章前面讨论到的，一个对象关于一个任意点P1旋转必须根据下面的步骤进行操作：

•  平移P1到原点
•  将它旋转一个想要的角度
•  将P1平移回原来的点

考虑WPF里的矩阵旋转，关于点(1,2)旋转应该表示成下面的形式：

因此，矩阵m的关于点（1,2）Append旋转45度变成

这给出了和图2-6一样的结果(-0.707, 2.121,  -0.707, 4.949, 1, 0.586)。存在微小的差异是因为小数舍入。

相似地，关于点（1,2）Prepend旋转45度应该是

同样，结果和图2-6显示的一样。

最后，我们检查Skew方法，它创建了一个剪切变换。这个方法有两个参数，AngleX和AngleY，分别表示，水平和垂直倾斜因子。倾斜变换在齐次坐标系里可以表示成下面的形式

这里，tan(AngleX)和tan(AngleY)分别是X和Y方向的倾斜变换因子。看一下这个例子中的Skew变换。倾斜角度是AngleX=45度，AngleY=30度。这种情况下，Skew矩阵是

因此，对于Append变换，我们得到

这证实了图2-6中显示的结果。

对于Prepend Skew变换，我们得到

结果和图2-6给出的一样。

这里，我对WPF中的矩阵变换进行了详细的解释。这些信息对于理解定义和WPF中的内部表示矩阵，和在WPF应用程序中正确使用矩阵很有用。