Flash 畸变网格中的坐标

我在2D系统中有一个网格，就像之前图像中的网格一样，其中所有点a、B、C、D、a'，B'，C'，D'都给定了（这意味着我知道各自的x坐标和y坐标）

我需要计算网格扭曲时A（新）、B（新）、C（新）和D（新）的x和y坐标（因此A'移动到A'（新），B'移动到B'（新），C'移动到C'（新），D'移动到D'（新））

变形的发生方式是网格线被分成等长的子线（例如，表示AB被分成等长的5部分| AB |/5，a（新）B（新）被分成等长的5部分| a（新）B（新）|/5）

变形是使用的扭曲图像类完成的。（我的实际任务是使用此类扭曲图像，其中控制柄不位于图像的角部，而是位于图像的某个位置）

---

您确定要了解所有这些句柄吗？在这些例子中，手柄是作为电影剪辑上的参考点来绘制的，它们与图像或图像上的失真没有任何关系。如果只想将处理程序放在图像中，则只需偏移点计算值（

topRightCorner=新点（pointb.x+10，point.y-10）

）

如果您真的想开始计算精确的点，那么您可以尝试从处理程序调用

localToGlobal（newpoint（this.x，this.y））

，以确定它在哪里（以及应用于它的转换）。否则，您将不得不处理转换矩阵，并精确计算类如何计算其三角形

有关转换矩阵的非常好的指南，请参见此处：

---

祝你好运

你想从算法角度（转换等）获得帮助，还是想寻求关于如何使用Sandy 3D flash引擎实现转换的帮助？

你可能会想出一些办法，但我怀疑你或你的用户是否会喜欢这个结果

要了解原因，请在图像内部选择一个点。假设你想把它向上移动一点。您可以通过移动四个角中的任何一个来实现这一点（在演示中尝试）。这意味着，如果你想把一个把手放在那里，然后向上移动，四个角会以某种组合方式移动。最有可能的是，这些角落不会满足你的要求。例如，它们四个都可以向上移动相同的量，从而产生纯平移而没有扭曲。或者一个角落可以移动，但可能不是你期望的那个。有无限多的解决方案，你选择的方案很可能不是你（或其他人）所期望的

---

顺便说一下，演示中使用的失真方法是“双线性插值”。在拐角处设置控制柄可能是控制它的最佳方式。

对我来说，这看起来像一个线性变换。我们之所以知道这一点，是因为原始图形中的任何一条线也是变换图形中的一条线（对于您给出的演示来说，这并不总是正确的，但如果您遵循问题中给出的方向，并且不允许凹顶点，则会正确）。我相信AS3内置了对变换矩阵操作的支持。如果没有，您可以自己实现它们

[ x' ]  =   [ a b ] x [ x ]
[ y' ]      [ c d ]   [ y ]

这些是矩阵。第一个是向量（你的终点），它等于某个2x2矩阵乘以向量（你的原点）

如果您不熟悉矩阵乘法，可以简化为：

x' = a*x + b*y
y' = c*x + b*y

任何线性变换都可以用a、b、c和d的二乘二矩阵表示。为它们中的每一个选择数字，就可以得到一个线性变换。那么，如何找到a、b、c和d的值，从而得到你的值呢

对于四个未知数，需要四个方程。如果你看上面的方程，你会看到一个点（“向量”）和它的变换会给你两个方程。所以…我们需要两点。正如您稍后将看到的，拾取未转换形式（m，0）和（0，n）（即一个沿x轴，另一个沿y轴）的点非常有用

在您的示例中，这些很容易找到！它们是B和D（如果A或C是您的原产地）

我将使用稍微不同的符号：“素数”来表示点的转换版本

B => B'
B_x => B'_x
B_y => B'_y

如果知道B和D的前后坐标，就可以找到变换矩阵a，B，c，D

设置方程式：

B'_x = a * B_x + b * B_y
B'_y = c * B_x + d * B_y

D'_x = a * D_x + b * D_y
D'_y = c * D_x + d * D_y

现在，假设B是x轴的点，形式为（B_x，0）。假设D是y轴点，形式为（0，dy）。如果情况相反，则切换它们。在这里，我们假设您的源代码是A=（0,0），就像大多数Flash应用程序一样

设置B_y=0和D_x=0，我们得到：

B'_x = a * B_x + b * 0
B'_y = c * B_x + d * 0
D'_x = a * 0   + b * D_y
D'_y = c * 0   + d * D_y

利用代数的幂，我们发现：

a = B'_x / B_x
c = B'_y / B_x
b = D'_x / D_y
d = D'_y / D_y

因此，简言之： 如果知道原始点：（原始x轴和y轴上的顶点）

以及它们的变形点

M' = (M'_x, M'_y)
N' = (N'_x, N'_y)

（因此M=>M'和N=>N'）

然后计算并存储这四个变量：

a = M'_x / M_x
b = N'_x / N_y
c = M'_y / M_x
d = N'_y / N_y

最后：

(x, y)  =>  ( a*x + b*y , c*x + d*y )

---

编辑：好的，我浏览了你的一些任意角柄变换，并意识到当我假设你的变换是线性的时候，我突然得出了结论。上述方程式仅在两种情况下为线性：

您的新网格是一些旋转网格的形状（而您的原始网格是一个方形的“法线”网格）

（0,0）原点的位置不会更改

---

现在，我不确定你允许你的控制柄定位的自由度，但也许你可以限制它们，使你的网格空间始终遵循旋转平行四边形的形式。

我不能给你完整的答案，但我非常肯定你会在“纹理贴图和图像扭曲的基础”中找到它Paul S.Heckbert：（在附录中，它包含各种映射的源代码）

Let（u，v

(x, y)  =>  ( a*x + b*y , c*x + d*y )

A' = A*(1-au)*(1-av) + B*au*(1-av) + C*au*av + D*(1-au)*av
A' - B*au*(1-av) - C*au*av - D*(1-au)*av = A*(1-au)*(1-av)
A = (A' - B*au*(1-av) - C*au*av - D*(1-au)*av) / ((1-au)*(1-av))

     double au = .35, av = .15; // texture coordinates of A'
     double bu = .8, bv = .2;   // texture coordinates of B'
     double cu = .8, cv = .6;   // texture coordinates of C'
     double du = .2, dv = .9;   // texture coordinates of D'

     // if we're dragging A' (AA), then move A, etc.
     if (sender == ThumbAA) A = (AA - B*au*(1-av) - C*au*av - D*(1-au)*av) / ((1-au)*(1-av));
     if (sender == ThumbBB) B = (BB - A*(1-bu)*(1-bv) - C*bu*bv - D*(1-bu)*bv) / (bu*(1-bv));
     if (sender == ThumbCC) C = (CC - A*(1-cu)*(1-cv) - B*cu*(1-cv) - D*(1-cu)*cv) / (cu*cv);
     if (sender == ThumbDD) D = (DD - A*(1-du)*(1-dv) - B*du*(1-dv) - C*du*dv) / ((1-du)*dv);

     // update position of A', B', C', D'   
     AA = A*(1-au)*(1-av) + B*au*(1-av) + C*au*av + D*(1-au)*av;
     BB = A*(1-bu)*(1-bv) + B*bu*(1-bv) + C*bu*bv + D*(1-bu)*bv;
     CC = A*(1-cu)*(1-cv) + B*cu*(1-cv) + C*cu*cv + D*(1-cu)*cv;
     DD = A*(1-du)*(1-dv) + B*du*(1-dv) + C*du*dv + D*(1-du)*dv;