2010-02-28 3 views
30

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

alt text http://www.polar-b.com/scew.png

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

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

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

+1

Вот другой способ для достижения этой цели: http://stackoverflow.com/questions/9470493/transforming-a-rectangle-image-into- a-quadrilateral-using-a-catransform3d. Дайте мне знать, если это поможет. – MonsieurDart

+0

На 2016 год: благодаря всем удивительным основам здесь: вот выпадение Swift-решения http://stackoverflow.com/a/39981054/294884 – Fattie

ответ

79

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

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

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

Другое по вертикали. Наивное правило преобразования является

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

где с Y-координата точки пересечения линий, соединяющих p1 и p3, и Р2 и Р4.

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

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

[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]]; 
} 
+0

Привет Кенни. Думаю, я понимаю вашу мысль. но у меня есть проблема с реализацией: подкласс CATransform3DTransform = CATransform3DIdentity; // sublayerTransform.m11 = P; // !!!!! здесь мне нужно что-то сделать с m11, m14, m22 ... right ??? и как мне найти P, Q, R .. imageLayer.contents = (id) [[UIImage imageNamed: @ "scene.jpg"] CGImage]; [layer addSublayer: imageLayer]; layer.sublayerTransform = sublayerTransform; – Dmitry

+0

@Dmitry: Да. Вам нужно решить 6 уравнений с 6 неизвестными (P, Q, R и т. Д.) – kennytm

+0

Мне ужасно жаль назойливости, но КАК ??? – Dmitry

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

7

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

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

2

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

вы правы о прекрасном! Я использовал ваши замечательные раскладки Swift для Swift-версии здесь http://stackoverflow.com/a/18606029/294884 просто заглядывайте и звоните с одной строкой, приветствия! Так что спасибо большое! – Fattie

Смежные вопросы