logo标签列表

iPhone 图像拉伸（扭曲）

iphoneimagetransformstretch
33

如何扭曲一张图片？例如，每个角落都有一个CGPoint，坐标为-p1、p2、p3、p4。然后，我需要设置-p4.x+=50，p4.y+=30。这样角落（p4）应该在2D透视下被拉伸，图像应该被扭曲。

alt text
(来源：polar-b.com)

我尝试使用CATransform3D，但似乎不能以这种方式完成，因为它只是改变视图的透视效果（旋转、使一侧更近/远离）。也许CGAffineTransform会有用吗?

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

提前感谢。

1
这里有另一种实现方法：https://dev59.com/mWox5IYBdhLWcg3wDgEz 如果有帮助请告诉我。 - MonsieurDart
1
2016年：感谢所有在这里做出的惊人基础工作：这是一个可插拔的Swift解决方案https://dev59.com/mWox5IYBdhLWcg3wDgEz#39981054 - Fattie
4个回答
82

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]];
}
@Dmitry：是的。您需要解决6个方程，其中有6个未知数（P、Q、R等）。 - kennytm
24
我必须说，这是一个非常出色的自定义CATransform3D分解。干得好！ - Brad Larson
1
http://iphonedevelopment.blogspot.com/2009/05/opengl-es-from-ground-up-part-6_25.html - user518181
同意@BradLarson的观点，哪里有“向发帖人发送1000美元”的按钮！ - Fattie
1
这是一个干净的Swift版本，适用于2016年，可以在https://dev59.com/mWox5IYBdhLWcg3wDgEz#18606029中使用。 - Fattie
显示剩余8条评论
8

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://dev59.com/mWox5IYBdhLWcg3wDgEz#12820877

然后你就可以完全控制四边形中的每个点了。:)

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

你需要调整m24和m14来获得这样的形状。

5
提到0.000567以获得M24的梯形形状。 - jothikenpachi
3

我尝试使用@KennyTM的精彩答案来编写Swift程序，但是遇到了一个错误：“表达式过于复杂，无法在合理时间内解决”。

因此，这里提供了一个简化版本的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)
1
你说得对，太棒了！我在这里使用了你精彩的Swift计算分解方法，链接在这里https://dev59.com/mWox5IYBdhLWcg3wDgEz#18606029。只需一行代码即可调用，非常感谢你！ - Fattie
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接