如何倾斜图像?例如,每个角都有一个坐标为 p1、p2、p3、p4 的 CGPoint。然后,我需要设置-p4.x+=50,p4.y+=30。所以这个角 (p4) 应该在 2D 透视图中被拉伸并且图像应该被扭曲。
(来源:polar-b.com)
我尝试使用CATransform3D,但似乎不能以这种方式完成,因为它只是改变视角(旋转,使一侧更近/更远)。也许CGAffineTransform可能有用?
如果你知道答案,请写一个示例代码。
提前致谢
如何倾斜图像?例如,每个角都有一个坐标为 p1、p2、p3、p4 的 CGPoint。然后,我需要设置-p4.x+=50,p4.y+=30。所以这个角 (p4) 应该在 2D 透视图中被拉伸并且图像应该被扭曲。
(来源:polar-b.com)
我尝试使用CATransform3D,但似乎不能以这种方式完成,因为它只是改变视角(旋转,使一侧更近/更远)。也许CGAffineTransform可能有用?
如果你知道答案,请写一个示例代码。
提前致谢
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]];
}
UIImage / CGImageRef 上的 3D 变换
您应该能够自己计算每个像素的映射.. 不完美,但它可以解决问题......
它可以在这个存储库http://github.com/hfossli/AGGeometryKit/
有趣的文件是
https://github.com/hfossli/AGGeometryKit/blob/master/Source/AGTransformPixelMapper.m
https://github.com/hfossli/AGGeometryKit/blob/master/Source/CGImageRef%2BCATransform3D.m
https://github.com/hfossli/AGGeometryKit/blob/master/Source/UIImage%2BCATransform3D.m
UIView / UIImageView 上的 3D 变换
https://stackoverflow.com/a/12820877/202451
然后您将完全控制四边形中的每个点。:)
struct CATransform3D
{
CGFloat m11, m12, m13, m14;
CGFloat m21, m22, m23, m24;
CGFloat m31, m32, m33, m34;
CGFloat m41, m42, m43, m44;
};
你必须调整m24
并m14
获得这样的形状。
我在 Swift 中尝试了精彩的答案@KennyTM,得到了一个错误“表达式太复杂,无法在合理的时间内解决”。
所以这里是 Swift 的简化版本:
let y21 = y2a - y1a
let y32 = y3a - y2a
let y43 = y4a - y3a
let y14 = y1a - y4a
let y31 = y3a - y1a
let y42 = y4a - y2a
let a = -H*(x2a*x3a*y14 + x2a*x4a*y31 - x1a*x4a*y32 + x1a*x3a*y42)
let b = W*(x2a*x3a*y14 + x3a*x4a*y21 + x1a*x4a*y32 + x1a*x2a*y43)
let c0 = -H*W*x1a*(x4a*y32 - x3a*y42 + x2a*y43)
let cx = H*X*(x2a*x3a*y14 + x2a*x4a*y31 - x1a*x4a*y32 + x1a*x3a*y42)
let cy = -W*Y*(x2a*x3a*y14 + x3a*x4a*y21 + x1a*x4a*y32 + x1a*x2a*y43)
let c = c0 + cx + cy
let d = H*(-x4a*y21*y3a + x2a*y1a*y43 - x1a*y2a*y43 - x3a*y1a*y4a + x3a*y2a*y4a)
let e = W*(x4a*y2a*y31 - x3a*y1a*y42 - x2a*y31*y4a + x1a*y3a*y42)
let f0 = -W*H*(x4a*y1a*y32 - x3a*y1a*y42 + x2a*y1a*y43)
let fx = H*X*(x4a*y21*y3a - x2a*y1a*y43 - x3a*y21*y4a + x1a*y2a*y43)
let fy = -W*Y*(x4a*y2a*y31 - x3a*y1a*y42 - x2a*y31*y4a + x1a*y3a*y42)
let f = f0 + fx + fy;
let g = H*(x3a*y21 - x4a*y21 + (-x1a + x2a)*y43)
let h = W*(-x2a*y31 + x4a*y31 + (x1a - x3a)*y42)
let i0 = H*W*(x3a*y42 - x4a*y32 - x2a*y43)
let ix = H*X*(x4a*y21 - x3a*y21 + x1a*y43 - x2a*y43)
let iy = W*Y*(x2a*y31 - x4a*y31 - x1a*y42 + x3a*y42)
var i = i0 + ix + iy
let epsilon = CGFloat(0.0001);
if fabs(i) < epsilon {
i = epsilon * (i > 0 ? 1 : -1);
}
return CATransform3D(m11: a/i, m12: d/i, m13: 0, m14: g/i, m21: b/i, m22: e/i, m23: 0, m24: h/i, m31: 0, m32: 0, m33: 1, m34: 0, m41: c/i, m42: f/i, m43: 0, m44: 1.0)