iPhone 图像拉伸(stretch)(倾斜)

Question

如何倾斜图像？例如，每个角都有一个 CGPoint，其坐标为 - p1、p2、p3、p4。然后，我需要设置 - p4.x+=50，p4.y+=30。因此这个角 (p4) 应该在 2D 透视中拉伸(stretch)，并且图像应该扭曲。

_{(来源:polar-b.com)}

我尝试使用CATransform3D，但似乎不能以这种方式完成，因为它只是改变 View 的视角(旋转、拉近/拉远一侧)。也许CGAffineTransform有用？

如果您知道答案，请编写示例代码。

提前致谢

Answer 1

CGAffineTransform 不可能。仿射变换总是可以分解为平移、旋转、剪切和缩放。它们都将平行四边形映射为平行四边形，而您的变换则不然。

对于您的转换，可以分两步完成。一个将正方形转换为梯形。

p1-----p2       p1-----p2
 |     |   -->   |       \
p3-----p4       p3--------p4'

另一个是垂直方向。一个朴素的转换规则是

                   y - c
x' = (x - p1.x) * ———————— + p1.x
                  p1.y - c
y' = y

其中 c 是连接 p1 和 p3、p2 和 p4 的线的交点的 y 坐标。

现在请注意转换中的 x*y 因子。这表明这种变换不是线性的。因此，CATransform3D 也无法将其作为 2D 变换来执行。

然而，向量

[x, y, z, w=1]

将转换为实际的 3D 矢量

(x/w, y/w, z/w)

在投影之前，如果 CA 遵循通常的 3D 计算图形规则，那么您可以通过使用变换来“作弊”

[ P . . Q ] [ x ]   [ x' ]
[ . R . S ] [ y ] = [ y' ]
[ . . 1 . ] [ z ]   [ z' ]
[ . T . U ] [ 1 ]   [ w' ]

使用适当的 P、Q、R、S、T、U 将 4 个点映射到预期位置。 (在大多数情况下，6 个唯一坐标和 6 个变量应该恰好有 1 个解。)

找到这 6 个常数后，您可以制作一个 CATransform3D 。注意结构体定义是

struct CATransform3D
   {
   CGFloat m11, m12, m13, m14;
   CGFloat m21, m22, m23, m24;
   CGFloat m31, m32, m33, m34;
   CGFloat m41, m42, m43, m44;
};
typedef struct CATransform3D CATransform3D;

因此您可以直接更改矩阵元素，而不需要依赖 CATransform3DMake 函数。 (由于使用行或列向量的约定，您可能需要执行转置。)

<小时/>

获取将矩形 ((X, Y), (W, H)) 转换为任意四边形 ((x1a, y1a), (x2a, y2a); (x3a, y3a), (x4a, y4a) 的变换))，使用此函数(您可能需要转置):

function compute_transform_matrix(X, Y, W, H, x1a, y1a, x2a, y2a, x3a, y3a, x4a, y4a) {
    var y21 = y2a - y1a, 
        y32 = y3a - y2a,
        y43 = y4a - y3a,
        y14 = y1a - y4a,
        y31 = y3a - y1a,
        y42 = y4a - y2a;

    var a = -H*(x2a*x3a*y14 + x2a*x4a*y31 - x1a*x4a*y32 + x1a*x3a*y42);
    var b = W*(x2a*x3a*y14 + x3a*x4a*y21 + x1a*x4a*y32 + x1a*x2a*y43);
    var c = H*X*(x2a*x3a*y14 + x2a*x4a*y31 - x1a*x4a*y32 + x1a*x3a*y42) - H*W*x1a*(x4a*y32 - x3a*y42 + x2a*y43) - W*Y*(x2a*x3a*y14 + x3a*x4a*y21 + x1a*x4a*y32 + x1a*x2a*y43);

    var d = H*(-x4a*y21*y3a + x2a*y1a*y43 - x1a*y2a*y43 - x3a*y1a*y4a + x3a*y2a*y4a);
    var e = W*(x4a*y2a*y31 - x3a*y1a*y42 - x2a*y31*y4a + x1a*y3a*y42);
    var f = -(W*(x4a*(Y*y2a*y31 + H*y1a*y32) - x3a*(H + Y)*y1a*y42 + H*x2a*y1a*y43 + x2a*Y*(y1a - y3a)*y4a + x1a*Y*y3a*(-y2a + y4a)) - H*X*(x4a*y21*y3a - x2a*y1a*y43 + x3a*(y1a - y2a)*y4a + x1a*y2a*(-y3a + y4a)));

    var g = H*(x3a*y21 - x4a*y21 + (-x1a + x2a)*y43);
    var h = W*(-x2a*y31 + x4a*y31 + (x1a - x3a)*y42);
    var i = W*Y*(x2a*y31 - x4a*y31 - x1a*y42 + x3a*y42) + H*(X*(-(x3a*y21) + x4a*y21 + x1a*y43 - x2a*y43) + W*(-(x3a*y2a) + x4a*y2a + x2a*y3a - x4a*y3a - x2a*y4a + x3a*y4a));

    return [[a,b,0,c],[d,e,0,f],[0,0,1,0],[g,h,0,i]];
}