《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应用程序中正确使用矩阵很有用。