Question

Hoping someone can help, i’m trying to work out how to transform an image from a rectangle to a quadrilateral with given x,y screen coordinates for each corner.

So far I have put the image on a CALayer but need to work out the CATransform3D to warp the rectangle to needed quadrilateral. An example of what I am trying to achieve is below (from a to b).

Example Rect to Quad image

If I am wrong and cant be done using CATransform3D is there any other way this can be achieved with a example please.

I think KennyTM’s answer is close to what i need from here..

iPhone image stretching (skew)

I have tried it and not had much luck, he does mention “you may need a transpose” but if that is the case I’m not sure what to do.

Answer 1

CATransform 3D can definitely do what you are trying to use it for. I tested out the code you linked to and it worked perfectly for me. Remember that a transformation matrix like that is defined only up to a scale because it is in homogeneous coordinates. Once you generate the matrix with his equations divide each element by the bottom right element. The only reason I can think of that you would need a transpose would be because the transform he gives is in row major order. If you are filling a column major transformation matrix (which I believe CATransform3D is) you need to transpose it after you fill it.

Here is the code I used to test it, It uses matrix classes from openCV and is in c++ but should prove the point

cv::Matx41d rect_tl(-10,-10,0,1);
cv::Matx41d rect_tr(10,-10,0,1);
cv::Matx41d rect_bl(-10,10,0,1);
cv::Matx41d rect_br(10,10,0,1);

cv::Matx41d quad_tl(2,2,0,1);
cv::Matx41d quad_tr(4,6,0,1);
cv::Matx41d quad_bl(2,-1,0,1);
cv::Matx41d quad_br(3,5,0,1);


double X = rect_tl(0);
double Y = rect_tl(0);
double W = 20;
double H = 20;

double x1a = quad_tl(0);
double y1a = quad_tl(1);

double x2a = quad_tr(0);
double y2a = quad_tr(1);

double x3a = quad_bl(0);
double y3a = quad_bl(1);

double x4a = quad_br(0);
double y4a = quad_br(1);



double y21 = y2a - y1a,
y32 = y3a - y2a,
y43 = y4a - y3a,
y14 = y1a - y4a,
y31 = y3a - y1a,
y42 = y4a - y2a;

double a = -H*(x2a*x3a*y14 + x2a*x4a*y31 - x1a*x4a*y32 + x1a*x3a*y42);
double b = W*(x2a*x3a*y14 + x3a*x4a*y21 + x1a*x4a*y32 + x1a*x2a*y43);
double 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);

double d = H*(-x4a*y21*y3a + x2a*y1a*y43 - x1a*y2a*y43 - x3a*y1a*y4a + x3a*y2a*y4a);
double e = W*(x4a*y2a*y31 - x3a*y1a*y42 - x2a*y31*y4a + x1a*y3a*y42);
double 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)));

double g = H*(x3a*y21 - x4a*y21 + (-x1a + x2a)*y43);
double h = W*(-x2a*y31 + x4a*y31 + (x1a - x3a)*y42);
double 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));

cv::Matx44d matrix(a,b,0,c
                   ,d,e,0,f
                   ,0,0,1,0
                   ,g,h,0,i);
matrix = matrix*(1/matrix(15));
//You may need a transpose here

cv::Matx41d test_tl = matrix*rect_tl;
test_tl *= (1/test_tl(3));
cv::Matx41d test_tr = matrix*rect_tr;
test_tr *= (1/test_tr(3));
cv::Matx41d test_bl = matrix*rect_bl;
test_bl *= (1/test_bl(3));
cv::Matx41d test_br = matrix*rect_br;
test_br *= (1/test_br(3));

After executing, all test variables at the bottom matched their quad counterparts perfectly. Hopefully that clears things up.