Tips - 变换矩阵 - Rainmeter官方文档 - 雨滴社区

joky 发表于 2012-5-27 15:09:38

Tips - 变换矩阵

<div> </div>【版权声明】    本文档翻译者：<a href="http://bbs.rainmeter.cn/home.php?mod=space&uid=229788&do=profile" target="_blank">雨滴社区-相望无言</a>    本文档仅用于雨滴社区站内交流，禁止转载，由此引发的一切责任及版权纠纷由转载、传播本文档者负责。  <div style="mso-element:para-border-div;border:none;border-bottom:dotted #84A1AF 1.0pt;
mso-border-bottom-alt:dotted #84A1AF .75pt;padding:0cm 0cm 0cm 0cm;background:
white">

<p class="MsoNormal" align="left" style="text-align:left;mso-pagination:widow-orphan;
mso-outline-level:2;background:white;border:none;mso-border-bottom-alt:dotted #84A1AF .75pt;
padding:0cm;mso-padding-alt:0cm 0cm 0cm 0cm">变换矩阵<o:p></o:p>

</div>

Tips by Alex2539<o:p></o:p>

在rainmeter中最酷最难得无疑是TransformationMatrix设置，理论上，可以用它来缩放、旋转、翻转meter。以你选择的方式倾斜它，在你选择的任何方式歪曲了。实际上繁琐的关联使得你头疼，在这里，我希望能提供一个合适的解释，这样使得你可以创造更大更好的皮肤。<o:p></o:p>

理解矩阵<o:p></o:p>

根据你已经学习了哪些数学课程，你可能已经知道什么是矩阵。如果不是，那么了解它们是比较重要的。在这一节中，我会假设你对于矩阵一无所知。一旦你理解矩阵是什么和如何使用它，稍后你将很容易建立一个变换矩阵。<o:p></o:p>

<div style="mso-element:para-border-div;border:none;border-bottom:dotted #84A1AF 1.0pt;
mso-border-bottom-alt:dotted #84A1AF .75pt;padding:0cm 0cm 0cm 0cm;background:
white">

<p class="MsoNormal" align="left" style="text-align:left;mso-pagination:widow-orphan;
mso-outline-level:2;background:white;border:none;mso-border-bottom-alt:dotted #84A1AF .75pt;
padding:0cm;mso-padding-alt:0cm 0cm 0cm 0cm"><a href="http://en.wikipedia.org/wiki/Transformation_matrix" target="_blank">变换矩阵</a><o:p></o:p>

</div>

一个矩阵（复数矩阵）是一个矩形网格中所有有序的一串数字。只要你喜欢，网格可以有很多行和列，这取决于你打算使用矩阵做什么。在数学的世界，矩阵几乎应用在每一个领域中。最常用的是线性代数，你可以解决多个未知的多个方程。他们可以被应用在几何中。这是我们要深入的，我们用第一个矩阵来表示点，使用第二个矩阵，表示修改这一点的方式。这就是所谓的变形。当你用很多点形成形状或图像，你可以在每个点上应用“变形”，结果通常是一些熟悉的东西，像一个旋转，拉伸，一个动作，甚至是他们的组合。这就对了，你可以使得他们同时变大和倾斜。<o:p></o:p>

当你手写出一个矩阵，根据他们的行和列，整个矩阵是由两个巨大的方括号包围起来的数字矩阵。不幸的是，没有简单的方法做，所以当我写一个矩阵的时候，我在每一侧用竖直的栅栏代表方括号。不要太在意它，它只是要清楚矩阵开始和结束的地方。你会发现，Rainmeter帮助文件做着同样的事情。<o:p></o:p>

只是为了让你知道使用矩阵是什么样子，这里是一些例子：<o:p></o:p>

<div style="mso-element:para-border-div;border:solid #CED1DA 1.0pt;mso-border-alt:
solid #CED1DA .75pt;padding:4.0pt 4.0pt 4.0pt 4.0pt;background:#EEF0F5">

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">| 1 2 3 |  这是一个2X3的矩阵<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">| 4 5 6 |<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; "> 

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">| 1 |      这是一个3X1的矩阵。通常情况下，我们称之为仅一列向量矩阵<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">| 2 | <o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">| 3 |<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; "> 

<pre style="margin-top: 7.5pt; margin-right: 0cm; margin-bottom: 7.5pt; margin-left: 0cm; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|15 20.2  4|  3x3 矩阵<o:p></o:p></pre><pre style="margin-top: 7.5pt; margin-right: 0cm; margin-bottom: 7.5pt; margin-left: 0cm; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">| 6  0.1  1|<o:p></o:p></pre><pre style="margin-top: 7.5pt; margin-right: 0cm; margin-bottom: 7.5pt; margin-left: 0cm; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">| 4  5   12|<o:p></o:p></pre></div>

当表示一个矩阵的大小，我们说是M x N矩阵，其中“M”是行数和“n”是列数。所以，你可以看到，一个矩阵可以是任何形状和任何种类的数，包括小数。你甚至可以把变量放在那，这样就有足够的信息，实际上解决的矩阵变量的值，这就像解决X的方程，但更大，更好。我们不会深入，因为它对于我们的目的不是很重要。<o:p></o:p>

变换矩阵<o:p></o:p>

正如我在开始时说，矩阵的应用之一是几何，在这里我们可以表示为矩阵点并且使用其他的矩阵来变换他们。这就是Rainmeter为你做的。至少，你知道如何告诉它这样做。<o:p></o:p>

通常情况下，我们的2D变换矩阵将看起来像这样：<o:p></o:p>

<div style="mso-element:para-border-div;border:solid #CED1DA 1.0pt;mso-border-alt:
solid #CED1DA .75pt;padding:4.0pt 4.0pt 4.0pt 4.0pt;background:#EEF0F5"><pre style="margin-top: 7.5pt; margin-right: 0cm; margin-bottom: 7.5pt; margin-left: 0cm; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|a c tx|<o:p></o:p></pre><pre style="margin-top: 7.5pt; margin-right: 0cm; margin-bottom: 7.5pt; margin-left: 0cm; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|b d ty|<o:p></o:p></pre><pre style="margin-top: 7.5pt; margin-right: 0cm; margin-bottom: 7.5pt; margin-left: 0cm; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|0 0  1| <o:p></o:p></pre></div>

在这个矩阵中，A，B，C和D是不同的值，这将影响到我们要变换成什么形状。变量tx和ty的值就实是X和Y（分别为水平和垂直）坐标被移动的值，最后一行“0 0 1“也会被使用，但并不是被rainmeter。所以我们只需要让它们在那里，只需要知道他们在那里，并且他们是0， 0， 1。下面我们有一个表示我们想要变形的点的位置的矩阵.它看起来像这样：<o:p></o:p>

<div style="mso-element:para-border-div;border:solid #CED1DA 1.0pt;mso-border-alt:
solid #CED1DA .75pt;padding:4.0pt 4.0pt 4.0pt 4.0pt;background:#EEF0F5">

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|x|<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|y|<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|1|<o:p></o:p>

</div>

x ,y 就是这个点的坐标，最后的1 不会真正的用到，让它在那里就好，最后，你想要变形的物体的每个点也包括在内。幸运的是，rainmeter为你做了所有的计算，你只需要坐着，看着它运行。<o:p></o:p>

在rainmeter中变换矩阵也是这样被使用，唯一不同的是最后一行永远不会变，当你键入TransformationMatrix时，你不用处理它，最后要注意在每一次都要写0；0；1，但是不要抱着“这么做是聪明的正确的方式”来更改它，这样做会引起错误，不会得到任何变换，<o:p></o:p>

应用变换矩阵<o:p></o:p>

现在我们有一个变换矩阵以及我们点的矢量模型，我们怎么做把他们组合起来？答案是把这2个矩阵相乘，用乘法把他们组合在一起是方便的事情之一。有一点要注意，你有2个矩阵A和B，AxB 不等于BxA，这个乘法的顺序很重要，左边的矩阵必须拥有和右边行数相等的列数，下面有些例子：<o:p></o:p>

<div style="mso-element:para-border-div;border:solid #CED1DA 1.0pt;mso-border-alt:
solid #CED1DA .75pt;padding:4.0pt 4.0pt 4.0pt 4.0pt;background:#EEF0F5">

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|1 2 3| |5 1|  这个乘法可以起作用<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|4 5 6|x|6 2|<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|7 8 9| |9 4|<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; "> 

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|4 7 1.1|  |4|   这个乘法可以起作用<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|0 2 0.5| x |7|<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">          |1|<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; "> 

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|5 3|  |7 4|     这个乘法不起作用<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|7 8| x |3 1|<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">      |0 2|<o:p></o:p>

</div>

所以，用坐标乘以变换矩阵，应该像这样：<o:p></o:p>

<div style="mso-element:para-border-div;border:solid #CED1DA 1.0pt;mso-border-alt:
solid #CED1DA .75pt;padding:4.0pt 4.0pt 4.0pt 4.0pt;background:#EEF0F5">

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|a  c  tx|  |x|<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|b  d  ty|x |y|<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|0  0   1|  |1|<o:p></o:p>

</div>

一个矩阵乘以另一个矩阵的结果是一个新的矩阵，这个新的矩阵来自于这2个矩阵，它将有着与第一个矩阵相同的行数，有着与第二个矩阵相同的列数。<o:p></o:p>

所以，3x3 矩阵与 3x1 矩阵相乘会得到一个3x1的矩阵，3x2 矩阵与 2x3会得到一个3x3矩阵，3x3 矩阵与 3x2矩阵相乘会得到一个3x2矩阵，等等，这个方法应该记住：如果你写了2个相邻且具有相同顺序的矩阵想要使得他们相乘， 2个内部的数字应该相同，外部的2个数字是新矩阵的尺寸<o:p></o:p>

这就是所有要做的，你成功的使这个点进行了变换，好吧，实际上是rainmeter完成了这个工作。但是现在你知道了他做了什么，但是这是怎么工作的？我还没有告诉你矩阵怎么相乘的。我只告诉了你怎么建立它，矩阵的乘法比简单的2组数字相乘更为复杂一些。你需要打散它，然后行对行，列对列。要注意我们已经知道了结果会是什么样子。刚才我们 3x3矩阵乘以3x1矩阵得到另外一个3x1矩阵，它与我们点的矢量坐标相同的外观这不是巧合，因为它就是新的坐标，它看起来应该像这样：<o:p></o:p>

<div style="mso-element:para-border-div;border:solid #CED1DA 1.0pt;mso-border-alt:
solid #CED1DA .75pt;padding:4.0pt 4.0pt 4.0pt 4.0pt;background:#EEF0F5">

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|a c tx|   |x|   |x'|<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|b d ty| x |y| = |y'|<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|0 0  1|  |1|  |1|<o:p></o:p>

</div>

现在我们通过结果如何得到一些实际的值。首先，取出第一个矩阵的第一行和第二个矩阵的第一列，在这个例子当中，
就是第一个矩阵中的a c tx和第二个矩阵中的x y 1 ，下一步
我们把这组数字对应相乘（第一个乘以第一个，第二个乘以第二个，第三个乘以第三个）然后把它们都加起来，如果把它写为公式就是：x’=ax+cy+tx，在这个例子中，结果x’就是新的X坐标。<o:p></o:p>

下一步，我们移到变换矩阵的第二行。我们得到相应的值，再次让他们相乘:y’=bx+dy+ty，这里，结果y’就是新的Y坐标。<o:p></o:p>

最后，我们移到变换矩阵的最后一行，做相同的事情，注意前2个值都是0，这意味着x,y都乘以0，这样在最后的结果中，他们不起到任何的作用。然后剩下的1乘1，这意味着最后的结果是0+0+1=1，这就是为什么Rainmeter 排除最后一行，正如你看到的，它永远输出相同的值，但是我们还是要让它保持着这样，实际上它在许多复杂的变换当中很重要。如果第二个矩阵有更多的列，我们应该再移动到下一列，让它与所有的行再次相乘，这将会给最终的结果带来新的一列，但是现在我们只需要做一个矢量。<o:p></o:p>

 

变换<o:p></o:p>

好了，现在我们知道什么是矩阵，也知道我们要使用的矩阵是什么样子，而且我们知道怎么应用变换，但是仅仅是有变换？我们怎么把它用于缩放和倾斜？好吧，我现在告诉你最简单的思考方法：每个变换矩阵中的值都有着不同的作用，我已经告诉你这个tx,ty是为了移动，其余的也具有不同的用途：<o:p></o:p>

Tip<o:p></o:p>

<p class="MsoNormal" align="left" style="margin-top:9.0pt;margin-right:0cm;
margin-bottom:9.0pt;margin-left:15.0pt;text-align:left;text-indent:-18.0pt;
line-height:14.25pt;mso-pagination:widow-orphan;mso-list:l0 level1 lfo1;
tab-stops:list 36.0pt;background:white">·        
A缩放X值<o:p></o:p>

<p class="MsoNormal" align="left" style="margin-top:9.0pt;margin-right:0cm;
margin-bottom:9.0pt;margin-left:15.0pt;text-align:left;text-indent:-18.0pt;
line-height:14.25pt;mso-pagination:widow-orphan;mso-list:l0 level1 lfo1;
tab-stops:list 36.0pt;background:white">·        
D缩放Y值<o:p></o:p>

<p class="MsoNormal" align="left" style="margin-top:9.0pt;margin-right:0cm;
margin-bottom:9.0pt;margin-left:15.0pt;text-align:left;text-indent:-18.0pt;
line-height:14.25pt;mso-pagination:widow-orphan;mso-list:l0 level1 lfo1;
tab-stops:list 36.0pt;background:white">·        
C倾斜X值
沿x倾斜<o:p></o:p>

<p class="MsoNormal" align="left" style="margin-top:9.0pt;margin-right:0cm;
margin-bottom:9.0pt;margin-left:15.0pt;text-align:left;text-indent:-18.0pt;
line-height:14.25pt;mso-pagination:widow-orphan;mso-list:l0 level1 lfo1;
tab-stops:list 36.0pt;background:white">·        
B倾斜Y值
沿y倾斜<o:p></o:p>

这就对了，整个过程他就藏在就在你的鼻子底下。就是如此简单，如果你让a=2，然后这个X值就会变成双倍，如果你让a=0.5,d=0.5,整个都会缩小一半的尺寸，告诉你一个秘密：使用负值，这样就可以反转这个图像，例如,如果a=-1 ，这个图就会沿着垂直轴翻转，一个不是那么直观的倾斜。回到乘法是理解它是个简单的方法。记住新的x值是表示：X’=ax+cy+tx.你已经知道了这个x会因为a被缩放，也会被tx移动，那么“y”起到什么作用呢？那就是倾斜，这个倾斜时会根据其他来改变一维，所以越往下的形状，这个x就会改变的更多。它一直保持着同样的高度，只是随着点的变化都会变得更远，最后它看起来是倾斜的形状，用象形图表示就是：<o:p></o:p>

<div style="mso-element:para-border-div;border:solid #CED1DA 1.0pt;mso-border-alt:
solid #CED1DA .75pt;padding:4.0pt 4.0pt 4.0pt 4.0pt;background:#EEF0F5">

<p class="MsoNormal" align="left" style="margin-top: 7.5pt; margin-right: 0cm; margin-bottom: 7.5pt; margin-left: 0cm; text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; "> [ ] --> / /<o:p></o:p>

</div>

在这一点你可以在Rainmeter中建立一个简单的测试皮肤把它尝试出来，它不会很难懂，我猜就是像下面这样:<o:p></o:p>

<div style="mso-element:para-border-div;border:solid #CED1DA 1.0pt;mso-border-alt:
solid #CED1DA .75pt;padding:4.0pt 4.0pt 4.0pt 4.0pt;background:#EEF0F5">

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; "><a name="OLE_LINK12"></a><a name="OLE_LINK11"> <o:p></o:p></a>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">Meter=IMAGE<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">w=200<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">h=200<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">SolidColor=255,255,255,128<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; "> 

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; "><o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">Meter=IMAGE<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">w=50<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">h=50<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">x=75<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">y=75<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">SolidColor=0,0,0<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">TransformationMatrix=1;0;0;1;0;0<o:p></o:p>

</div>

除了一个黑色正方形在一个半透明的白色背景上你不会看到更多的东西，这个背景仅仅是在那里当你看被变形的正方形的时候，Rainmeter仍旧关注着原始的正方形。皮肤边界外的任何东西都被忽略的。所以如果这个正方形单独在那，任何变形都会被微小的边界裁减掉。用增加背景的方式，你基本上只需增大你的舞台尺寸，如果你读了Rainmeter帮助中变形矩阵的部分，它会告诉你：<o:p></o:p>

<div style="mso-element:para-border-div;border:solid #CED1DA 1.0pt;mso-border-alt:
solid #CED1DA .75pt;padding:4.0pt 4.0pt 4.0pt 4.0pt;background:#EEF0F5">

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">TransformationMatrix<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">This <a name="OLE_LINK33"></a><a name="OLE_LINK32">defines</a> a 3x2 matrix which can be
used to transform the meter. There must be <a name="OLE_LINK31"></a><a name="OLE_LINK30">exactly</a> 6
values separated by ';'-<a name="OLE_LINK39"></a><a name="OLE_LINK38">character</a> (e.g.
"1;0;0;1;0;0") which <a name="OLE_LINK37"></a><a name="OLE_LINK36">define the matrix</a><a name="OLE_LINK35"></a><a name="OLE_LINK34"> in order of </a>"m11;m12;m21;m22;m31;m32".
<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; "> 

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">            |m11
m21 m31|<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">            |m12
m22 m32|<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">变换矩阵：<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">这里定义一个3x2矩阵可以被用来变换meter，必须是有6个明确的值并以“；”隔开（例如“1；0；0；1；0；0”）定义了矩阵的顺序“m11;m12;m21;m22;m31;m32”<o:p></o:p>

</div>

由于我已经解释了，矩阵就是像那些我展示给你的变换矩阵，当你不想让它工作的时候，只需要剪掉最后一行，重要的是字符串的地方，如果你用了我使用的字母，这个字符串应该是：TransformationMatrix=a;b;c;d;tx;ty,你是不是奇怪为什么我选择了这些字母，现在你知道了每个字母有什么作用，就像把他们按照正确的顺序排列一样简单。<o:p></o:p>

就是这样，如果你要拉伸和倾斜它，那就改变相应的变量。但是旋转怎么做呢？旋转看起来比倾斜更加直接，毕竟，我一直让他转动，但是多长时间做一次倾斜，在这个变换矩阵的例子中，没有单一的值你可以做到旋转，唯一的办法就是拉伸和倾斜，想想这个方法：如果你沿着X轴倾斜，所有垂直的线变为倾斜，如果你沿着Y轴倾斜，所有水平的线将变得倾斜。但是如果你只倾斜到90度？我将节省你一些时间，现在就告诉你方法，也是很简单的，仅仅在你另外一个倾斜的角度前加个负号，就是如果你倾斜x 为1 ，那么就倾斜y为-1，如果你这么做，你看到的是绕着左上角逆时针旋转45度，如果你想要顺时针，就转换正负号，如果你这么做了，就会得到一个45度的旋转。<o:p></o:p>

你把他试出来了么？是不是用 <a name="OLE_LINK81"></a><a name="OLE_LINK80"></a><a name="OLE_LINK79"></a><a name="OLE_LINK78">TransformationMatrix=1;-1;1</a>；1；0;0就旋转了皮肤中的正方形？如果你做到了。你会注意到2件事，第一，整个东西都被移到顶端，Rainmeter是怎么看东西的，我们稍后就会知道。第二，这个正方形现在是一个菱形，但是它也变大了，它实际上被乘以1.414，不要惊讶，还记得什么是倾斜么？当你沿着X轴倾斜，这个高度还是保持不变的，这样你得到了一些漂亮的对角线线条，但是他们也变得更长，记得当我说结合倾斜和缩放？这里会讲怎么正确的做到，你不能只改变a 和 d 得到一个小的正方形，试试，让它变得更小，但是它也会旋转，你必须改变使它倾斜的值。你怎么知道是那样？好吧，老实说，那会是长篇大论而且我也不想深入，所以我仅仅会给你一些公式：<o:p></o:p>

l  
 A=cos(angle)<o:p></o:p>

l  
 B=-sin(angle)<o:p></o:p>

l  
 C=sin(angle)<o:p></o:p>

l  
 D=cos(angle)<o:p></o:p>

你有了它之后，就可以用任意角度旋转物体，你该注意到它很像你想要的。是不是这样？你沿着每个轴用同样的角度倾斜它，把他们中的一个变成负值，然后你缩放它确认它变成同样大小了，如果你要用另外的方法旋转它，只要将b 负值c 正值做个替换。这样就可以办到了。你现在知道了怎么缩放，倾斜和旋转，用这些你可以得到一些有趣的效果，但是首先，如果你已经在Rainmeter中试验了，你肯定会有问题问自己：<o:p></o:p>

Rainmeter到底在做什么?!<o:p></o:p>

很高兴你这么问了，当你告诉RM你想让它怎么做的时候，你必须认识到它看东西和你是不同的。例如，如果你想要缩放物体，你会这么认为：<o:p></o:p>



Rainmeter会这么做:<o:p></o:p>



你做的每一个变形都会与源关联起来，那个点是坐标（0，0）。正常情况下，是这个物体的左上角。然而根据Rainmeter，这个源一直都是整个皮肤的左上角。这就是为什么你旋转这个正方形，他会突然会到顶部，它旋转对了，但是它是绕着整个皮肤的左上角旋转的，不是围绕自身的中心，由于这个原因，当你缩放，倾斜或者旋转物体的时候，你必须考虑到整个要移动，调整这个是非常简单的。所有你要做的就是选择那个你不想移动和变化的点，让这个点回到它原本的样子。<o:p></o:p>

让我们假设你想要每个方向都缩放1.5，让左上角原地不动。首先，你需要找到这个点的坐标，在这个例子中，他非常的简单，仅仅是这个正方形的X位置，如果你正在使用测试皮肤，（为什么不呢？）这就意味着你的正方形在（75，75），下一步，你需要找出它的最终和从哪里起作用，为了做到这个，看看我们的矩阵乘法，如果我们把他缩放1.5 并且我们的X和Y是75，然后这个乘法将会是这样：<o:p></o:p>

<div style="mso-element:para-border-div;border:solid #CED1DA 1.0pt;mso-border-alt:
solid #CED1DA .75pt;padding:4.0pt 4.0pt 4.0pt 4.0pt;background:#EEF0F5">

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|1.5 0   tx|   |75|  
|x'|<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|0   1.5 ty| x  |75| = |y'|<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|0   0   1|   |
1|   |1 |<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; "> 

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">Or in our case: TransformationMatrix=1.5;0;0;1.5;0;0<o:p></o:p>

</div>

所以我们有方程: 
x' = 75*1.5 + 75*0 + 1*tx 
y' = 75*0 + 75*1.5 + 1*ty 
 
如果我们用变量表示，我们会得到: 
x '= x*a + y*b + 1*tx 
y' = x*b + y*d + 1*ty 
 
我们已经知道X’和 Y’是什么（就是要移动到的位置），我们想要让它们都在75，所以如果你将75代入2个等式，算出TX和TY，你会得到：<o:p></o:p>

tx = 75 - 75*1.5 = -37.5 
ty = 75 - 75*1.5 = -37.5 
 
再次用变量表示: 
tx = x' - x*a - y*b 
ty = y' - x*b - y*d 
 
这里你要做的就是找出我们要移动正方形回去多少，所以我们新的变换矩阵出来了：<o:p></o:p>

<div style="mso-element:para-border-div;border:solid #CED1DA 1.0pt;mso-border-alt:
solid #CED1DA .75pt;padding:4.0pt 4.0pt 4.0pt 4.0pt;background:#EEF0F5">

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|1.5 0  
-37.5|   |75|   |x'|<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|0   1.5 -37.5| x
|75| = |y'|<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|0   0     1 
|   | 1|   |1 |<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; "> 

<p class="MsoNormal" align="left" style="text-align: left; line-height: 14.25pt; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">Or in our case:
TransformationMatrix=1.5;0;0;1.5;-37.5;-37.5<o:p></o:p>

</div>

如果我们解这个方程:<o:p></o:p>

x' = 75*1.5 + 75*0 + 1*-37.5 = 75 
y' = 75*0 + 75*1.5 + 1*-37.5 = 75 
 
当然，这说的我们处理这个计算，意思是Rainmeter做这些计算，记住这是Rainmeter负责的部分，但是如果知道这是什么原因那么在你遇到错误的时候就不会什么都不知道，你需要修复它，顺便说一句，防止你没有注意到，这个正方形已经回到它应该在的地方。 <o:p></o:p>

这个技巧会被用在任何变换上，特别有意思的是当你用它来旋转的时候，当你旋转一些物体，这个旋转的中心是唯一不变的点。其他的都在围绕你指定的点来转，如果你想要一个图只围绕它自己来转，你可以用这个图的中心作为旋转中心，使用这个技巧你需要学会把这个点移动到它开始的位置。实际上，让我们在这个正方形上面试一下，假设我们要这个正方形围绕它自己的中心旋转30度。首先，哪里是中心？在我们的例子中，它刚好是这个皮肤的中心：（100,100）。下一步，我们需要给出可以旋转30度的变换矩阵。如果你还记得，那就是用sin 和
cos 这个角度在每个方向上进行缩放和倾斜。它应该是这样：<o:p></o:p>

<div style="mso-element:para-border-div;border:solid #CED1DA 1.0pt;mso-border-alt:
solid #CED1DA .75pt;padding:4.0pt 4.0pt 4.0pt 4.0pt;background:#EEF0F5">

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">| cos(30) sin(30) tx|  
|100|<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|-sin(30) cos(30) ty| x |100|<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|       0       0 
    1|   |  1|<o:p></o:p>

</div>

我会直接写出tx的解，你现在应该知道怎么得到这一步。你需要算出sin 和 cos的值： 
tx = 100 - 100*cos(30) - 100*sin(30) = -36.6025 
ty = 100 - 100*-sin(30) - 100*cos(30) = 63.3975 
你也许会抱怨在答案中有很多4位小数。但是Rainmeter不需要所有。它只需要一点就够了。现在让我们看一下完整的变换矩阵应该是：<o:p></o:p>

<div style="mso-element:para-border-div;border:solid #CED1DA 1.0pt;mso-border-alt:
solid #CED1DA .75pt;padding:4.0pt 4.0pt 4.0pt 4.0pt;background:#EEF0F5">

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">| cos(30) sin(30) -36.6025|   |100|<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|-sin(30) cos(30) 
63.3975| x |100|<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|       0       0       1    
|    |  1|<o:p></o:p>

</div>

不幸的是当你实现它的时候，Rainmeter不会让你使用cos30 和sin30 作为一个值，你需要自己得到这个实际的值，最后，你应该得到： 
TransformationMatrix=0.86602;-0.5;0.5;0.86602;-36.6025;63.3975 
然后你就得到了一个围绕它自身中心旋转30度的正方形。你还想让他顺时针旋转么，那么你需要变换b和c的值，并且重新计算tx和ty，计算结果是： 
TransformationMatrix=0.86602;0.5;-0.5;0.86602;63.3975;-36.6025 
这些就是最基本的，你可以拉伸，倾斜，旋转。如果想让它变得更好请继续读下去！<o:p></o:p>

一个矩阵中实现多个变换!<o:p></o:p>

你也许再想，我喜欢旋转和拉伸，但是假如他俩一起实现呢？这个答案不是很明显，假设你想要旋转他并且缩放2倍尺寸，你也许又在想，怎么旋转它，你知道这个a和d的值是用来缩放的，那为什么不旋转并且把这些值放大2倍呢？还记得当你第一次尝试简单的缩放那个第一个倾斜-旋转么？他改变了角度并且得到一个不好预测的新尺寸。那么你要怎么做，答案就是矩阵相乘。<o:p></o:p>

如果你缩放和旋转一个物体，首先你要知道是你的顺序是什么，记住前面我们怎么处理矩阵乘法的，为了这件事情，实际上，<o:p></o:p>

它几乎是直观的，假设你要沿着左上角旋转正方形15度，然后缩放它来保证右上角在同样的地方。现在设想其他的方法，首先是缩放，其次是旋转，你会得到不同的结果，那就是你会得到一个2倍大的倾斜的正方形。但是这2게方法会得到不同的结果，所以在你开始之前要清楚的知道你怎么实现它，<o:p></o:p>

需要指出的是怎么让Rainmeter做这个，开始想的是怎么手写，如果你觉得要从旋转开始，那么你该使用恰当的变换矩阵，并得到结果，不要担心，我把这个计算列出来：<o:p></o:p>

<div style="mso-element:para-border-div;border:solid #CED1DA 1.0pt;mso-border-alt:
solid #CED1DA .75pt;padding:4.0pt 4.0pt 4.0pt 4.0pt;background:#EEF0F5">

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">| 0.9659 0.2588 -16.8559|   |x|  
|x'|<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|-0.2588 0.9659 
21.9670| x |y| = |y'|<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">| 0      0           1    
|    |1|   |1
|<o:p></o:p>

</div>

这会旋转每个x和y坐标向x’和y’并转向向上，现在你可以做你想要做的了，缩放整个物体2倍，保持右上角一直在哪里，这个变换矩阵应该是这样：<o:p></o:p>

<div style="mso-element:para-border-div;border:solid #CED1DA 1.0pt;mso-border-alt:
solid #CED1DA .75pt;padding:4.0pt 4.0pt 4.0pt 4.0pt;background:#EEF0F5">

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|2 0 -123.2916|  
|x'|    |x''|<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|0 2  -62.0595| x
|y'| = |y''|<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|0 0     0     |    |1
|    |1  |<o:p></o:p>

</div>

 

就是这样，你只需应用这2个变换矩阵，但是仔细看它，你真正要做的是什么？如果你要改变第二个变换，实际上是第一个变换，你得到这个<o:p></o:p>

<div style="mso-element:para-border-div;border:solid #CED1DA 1.0pt;mso-border-alt:
solid #CED1DA .75pt;padding:4.0pt 4.0pt 4.0pt 4.0pt;background:#EEF0F5">

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|2 0 -123.2916|   |
0.9659 0.2588 -16.8559|   |x|    |x'|<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|0 2  -62.0595| x
|-0.2588 0.9659  21.9670| x |y| = |y'|<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|0 0    1     |     |
0         0       
1     |    |1|   |1 |<o:p></o:p>

</div>

 

关于矩阵相乘的问题，如果有3个或更多的的矩阵，不用跟你的开始配对，只要他们是按照顺序的。例如，你又矩阵A B C<o:p></o:p>

你要把他们相乘在一起得到新矩阵D，你可以使用AxBxC=D，或者也可以AxB=M 然后 MxC=D,或者BxC=N,AxN=D,只要保持着矩阵的顺序，每个方法都能得到相同的结果。如果应用这个规则在当前的情况中，我们可以首先相乘变换矩阵。如果你记得这个方法，你已经知道 3x3 乘以 3x3 会得到另外一个 3x3 矩阵，所以，你怎么相乘这些呢，这就像我之前提到的一样的简单，取出 第一个矩阵的第一行，第二个矩阵的第一列，对应相乘，全部加起来得到第一个值，对其他行和列也这么做，你入你不确定这些值应该放在新矩阵中什么位置。只要记住你现在在计算哪个行和列，把它想象为一个十字线，你的目标是2线相交，第一行和第一列，他们相交于左上角的值。这意味着你得到的任何值就是在新矩阵的那个位置<o:p></o:p>

最后你得到了新的3x3 矩阵。唯一的问题是得到的新矩阵是长的，乏味的，并且容易出错。但是，现在有更好的方法，让其他人帮你做这个工作，这里有许多不同的资源可以自动计算矩阵乘法。图形计算器可以做，但是如果你手上没有它，你可以去这个网站<a href="http://wims.unice.fr/wims/en_tool~linear~matmult.html">http://wims.unice.fr/wims/en_tool~linear~matmult.html</a>。只要输入你的矩阵，并且确认在”C=”的位置上乘法的顺序是正确的（你的第二个矩阵变为第一个）。替换原来的2个矩阵，我得到下面的新矩阵“<o:p></o:p>

<div style="mso-element:para-border-div;border:solid #CED1DA 1.0pt;mso-border-alt:
solid #CED1DA .75pt;padding:4.0pt 4.0pt 4.0pt 4.0pt;background:#EEF0F5">

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">| 1.9318 0.5176 -157.0034|<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">|-0.5176 1.9318 
-18.1255|<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">| 0      0         1    
|<o:p></o:p>

</div>

 

你可能注意到这个新的矩阵的底部跟原来的变换矩阵非常的像，这是因为他本来就是。原来2个变换矩阵相乘在一起只是得到新的一个，如果你跟着引导做，这个新的，单一的矩阵实际上同变换矩阵相同。那么其他一面，如果你把这个值输入到Rainmeter中，应该是这样：<o:p></o:p>

TransformationMatrix=1.9318;-0.5176;0.5176;
1.9318;-157.0034;-18.1255 
 
<o:p></o:p>

试着把它做出来。你的正方形准确的执行了。首先它把左上角作为旋转中心旋转了自己。，然后这个尺寸也变成原来的2倍，并且保持在右上角位置。<o:p></o:p>

这个技巧可以用在任何2个矩阵中，如果你要变换它第三次。你只需要在乘以第三个矩阵，只要这个命令保存着他就会一直起作用。<o:p></o:p>

这就是你需要知道的，对于这个信息，你可以用任何方法变换任何meter。你可以用它得到一些有趣的形状。只要记住左右22边永远是平行的，而且长度也相同，以及顶部和底部，这意味着没有梯形，没有奇怪的四边形，只有平行四边形，但是这是你唯一的限制。梯形<o:p></o:p>

帮帮我！它不起作用了!<o:p></o:p>

请放松，如果它不起作用，你刚才做了什么，毕竟，这都是纯数学，是个人都有犯错的时候。一步一步检查你都做了哪些。如果有必要你需要重新做。确保所有的都被正确的相乘。确保你的格式为：
TransformationMatrix=a;b;c;d;tx;ty.如果你做了矩阵乘法，确保他们正确的执行了。毕竟，不同的命令有不同的结果。最后确保你的目的是可行的。记住你只能做哪些变换：缩放，倾斜，旋转，这意味着你可以得到一些有趣的效果，但是想要得到梯形是没办法的，那就是左右2侧永远是平行的并且永远是具有相同的长度，顶部和底部也一样。<o:p></o:p>

如果这些你都做了，它仍然不起作用，把问题留在这里。我将尽最大的可能解决它，祝你好运。<o:p></o:p>

福利！一些有用的贴士:<o:p></o:p>

下面是一些我觉得有用的技巧，以后回答问题都会写在这里。<o:p></o:p>

特殊倾斜：<o:p></o:p>

<span style="font-size:10.0pt;
font-family:宋体;mso-ascii-font-family:"Trebuchet MS";mso-hansi-font-family:"Trebuchet MS";
mso-bidi-font-family:宋体;color:#222222;mso-font-kerning:0pt;mso-bidi-font-weight:
bold">你知道怎么倾斜了，但是怎么倾斜你想要的任何角度呢？这个答案需要一点数学。正如你可能知道也可能不知道。这个直线方程是 y=mx+b，这里的 x y 就是坐标，m是斜率，b是控制上下的值。基本上每次你移动x=1，这个y也会被m移动，加上b值，这个很直观的知道什么是倾斜，如果你想要沿着x轴倾斜，这意味着这个y轴随着x改变，我们可以替换这个直线方程为：y’=bx+dy+ty，在这个方程中你会找到最终的y’坐标。现在假设你不要缩放只要倾斜，我们可以拿走dy ，方程变为y’=bx+ty，然后这意味着y坐标随着跟x坐标变化，在随着ty增加一点点。我们用这个怎么找到倾斜的角度呢？想象每个点作为一个直角三角形。这个水平的边会被x 改变，垂直的边会被y改变。如果你只要它沿着y轴倾斜1，这个直角三角形会是这样：<o:p></o:p>

<div style="mso-element:para-border-div;border:solid #CED1DA 1.0pt;mso-border-alt:
solid #CED1DA .75pt;padding:4.0pt 4.0pt 4.0pt 4.0pt;background:#EEF0F5">

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">    /|<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">   / | 1<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">  /__|<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">    1<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">y'=1*y<o:p></o:p>

</div>

这个底部一直是1，除非你决定缩放x，当y=1时右边的值是y’ ，就是这个例子中的1，变形值（tx 和 ty）这里不需要计算。通常说道角度的时候，意思就是左下 根据三角，我们知道知道，这个角度的正切值等于侧边除以对边。对于我们来说tan（angle）=1/1，非常简单，然而，我们想要做的事从一个角度开始，然后找出“b“值（b值被用来沿着y轴倾斜）。如果，事实上，这个等式是这样：tan(angle)=by/ax(把“a”也加入，是因为缩放x值改变底部的值，如果我们考虑到数字x和y本身会为1.我们可以操作这个等式为：tan(angle)=b/a，然后我们可以这么做：<o:p></o:p>

a*tan(angle)=b,有了这个，你只需要拿出计算器就能得到角度，乘以缩放x的值，然后就会得到矩阵中的“b”。如果沿着x轴倾斜，你需要b换成c，a换成d：d*tan（angle）=c<o:p></o:p>

使物体转动: <o:p></o:p>

<span style="font-size:10.0pt;
mso-bidi-font-size:12.0pt;font-family:宋体;mso-ascii-font-family:"Trebuchet MS";
mso-hansi-font-family:"Trebuchet MS";mso-bidi-font-family:宋体;color:#222222;
mso-font-kerning:0pt">如果让物体旋转一个角度是非常好的，也许你想多做几次，也许是经常使用变量来让他旋转是个简单的方法。Rainemter允许你从measure作为变量在其他measures和meters中使用。要使用此功能。我们只需在想要改变的measure或者meter下增加一行“DynamicVariables=1”。这样，我们就可以通过一个measure得到变化的变换矩阵中的值。在这个例子中，我们需要更多地measure，首先请记住一个变换矩阵旋转时的模式是这样的：<o:p></o:p>

<p class="MsoNormal" align="left" style="margin-top:9.0pt;margin-right:0cm;
margin-bottom:9.0pt;margin-left:15.0pt;text-align:left;text-indent:-18.0pt;
line-height:14.25pt;mso-pagination:widow-orphan;mso-list:l2 level1 lfo3;
tab-stops:list 36.0pt;background:white">·        
a = cos(angle)<o:p></o:p>

<p class="MsoNormal" align="left" style="margin-top:9.0pt;margin-right:0cm;
margin-bottom:9.0pt;margin-left:15.0pt;text-align:left;text-indent:-18.0pt;
line-height:14.25pt;mso-pagination:widow-orphan;mso-list:l2 level1 lfo3;
tab-stops:list 36.0pt;background:white">·        
b = -sin(angle)<o:p></o:p>

<p class="MsoNormal" align="left" style="margin-top:9.0pt;margin-right:0cm;
margin-bottom:9.0pt;margin-left:15.0pt;text-align:left;text-indent:-18.0pt;
line-height:14.25pt;mso-pagination:widow-orphan;mso-list:l2 level1 lfo3;
tab-stops:list 36.0pt;background:white">·        
c = sin(angle)<o:p></o:p>

<p class="MsoNormal" align="left" style="margin-top:9.0pt;margin-right:0cm;
margin-bottom:9.0pt;margin-left:15.0pt;text-align:left;text-indent:-18.0pt;
line-height:14.25pt;mso-pagination:widow-orphan;mso-list:l2 level1 lfo3;
tab-stops:list 36.0pt;background:white">·        
d = cos(angle)<o:p></o:p>

 

如果你观察它，就可以看到我们需要一个角度的正弦值，余弦值，还有更多measure可以翻转角度的正弦值和正负值，这简单的3个calc measures。你只需要另外2个，一个为了计算tx，另一个是计算ty，我们不能用静态的数值，所以其他也要跟着改变。假设我们想要旋转这个100*100像素的正方形meter，位置在60,60 并且围绕自身中心旋转它，这将得到一个图，一个文本块，一个bar 然而，这个例子的目的，它真正需要的是100x100 和(60,60)的定位。<o:p></o:p>

首先我们建立5个calc
measures：<o:p></o:p>

 

 

<div style="mso-element:para-border-div;border:solid #CED1DA 1.0pt;mso-border-alt:
solid #CED1DA .75pt;padding:4.0pt 4.0pt 4.0pt 4.0pt;background:#EEF0F5">

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; "> <o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">Measure=Calc<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">Formula=SIN((Counter%360)/360*2*PI)<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; "> 

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; "><o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">Measure=Calc<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">Formula=-(MeasureSinAngle)<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; "> 

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; "><o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">Measure=Calc<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">Formula=COS((Counter%360)/360*2*PI)<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; "> 

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; "><o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">Measure=Calc<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">Formula=110-MeasureCosAngle*110-MeasureSinAngle*110<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; "> 

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; "><o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">Measure=Calc<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">Formula=110-MeasureNegSinAngle*110-MeasureCosAngle*110<o:p></o:p>

</div>

记住你从我们讨论的公式中可以得到tx和ty。我们这里所用的值都是meaures而不是计算来的值。这些都是需要增加在你的meter中的：<o:p></o:p>

<div style="mso-element:para-border-div;border:solid #CED1DA 1.0pt;mso-border-alt:
solid #CED1DA .75pt;padding:4.0pt 4.0pt 4.0pt 4.0pt;background:#EEF0F5">

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">DynamicVariables=1<o:p></o:p>

<p class="MsoNormal" align="left" style="text-align: left; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; padding-top: 0cm; padding-right: 0cm; padding-bottom: 0cm; padding-left: 0cm; background-position: initial initial; background-repeat: initial initial; ">TransformationMatrix=;
; ; ; ;
<o:p></o:p>

</div>

现在你有了它之后，你的meter会围绕（110,110），这个是你meter的中心（60,60）加上meter自身（50,50），你可以很容易的更改tx和ty来改变这个meter的旋转中心。其他的meter你如果也加了这个，那么也会在批复中围绕这个点旋转。<o:p></o:p>

页: [1]

雨滴社区's Archiver

Tips - 变换矩阵