растяжение изображения iPhone (перекос) - PullRequest
30 голосов
/ 28 февраля 2010

Как мне перекошить изображение? Например, у каждого угла есть CGPoint с координатами - p1, p2, p3, p4. Затем мне нужно установить - p4.x + = 50, p4.y + = 30. Таким образом, этот угол (p4) должен быть растянут в 2D-перспективе, а изображение должно быть искажено.

alt text
(источник: polar-b.com )

Я пытался использовать CATransform3D , но кажется, что это невозможно сделать таким образом, поскольку это всего лишь изменение перспективы обзора (поверните, подведите ближе / дальше одну сторону). Может быть CGAffineTransform может быть полезен?

Если вы знаете ответ, напишите пример кода.

Заранее спасибо

Ответы [ 4 ]

81 голосов
/ 28 февраля 2010

Невозможно с CGAffineTransform. Аффинное преобразование всегда можно разложить на переводы, повороты, сдвиг и масштабирование. Все они отображают параллелограммы в параллелограммы, которых нет у вашего преобразования.

Для вашего преобразования это можно сделать в два этапа. Один, чтобы превратить квадрат в трапецию.

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

Еще в вертикальном направлении. Наивное правило преобразования:

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

где c - координата y точки пересечения линий, соединяющих p1 и p3 и p2 и p4.

Теперь обратите внимание на коэффициент x * y в преобразовании. Это указывает на то, что такое преобразование является , а не линейным. Следовательно, CATransform3D также не может выполнять это как 2D-преобразование.

Однако, вектор

[x, y, z, w=1]

будет преобразовано в фактический трехмерный вектор

(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 переменных должны иметь ровно одно решение в большинстве случаев.)

Когда вы нашли эти 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]];
}
7 голосов
/ 10 октября 2012

3D-преобразование на UIImage / CGImageRef

Вы должны быть в состоянии рассчитать отображение каждого пикселя самостоятельно. Не идеально, но это помогает ...

Доступен в этом хранилище 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


3D-преобразование в UIView / UIImageView

https://stackoverflow.com/a/12820877/202451

Тогда вы будете иметь полный контроль над каждой точкой в ​​четырехугольнике. :)

3 голосов
/ 02 июня 2011
struct CATransform3D
{
   CGFloat m11, m12, m13, m14;
   CGFloat m21, m22, m23, m24;
   CGFloat m31, m32, m33, m34;
   CGFloat m41, m42, m43, m44;
};

Вы должны настроить m24 и m14, чтобы получить такую ​​форму.

2 голосов
/ 05 ноября 2014

Я попробовал замечательный ответ @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)
...