0

I have 2 PNG images (image A and image B), each one with 2 points (point L and point R) which I know its pixel coordinates. Both images are placed inside a .

I need to make a javascript or jQuery function to combine these images. The image A should remain static, and the image B should be moved and change size in order to combine the points, L with L and R with R.

Like this: http://oi62.tinypic.com/5fq3qb.jpg

Whats the best method to achieve this?

So far I can only move the images to combine both points L, and resize image B, how can I find the angle to rotate it and combine point R?

1
  • I offer this solution: math
    – Ohgodwhy
    Jan 30, 2014 at 1:17

1 Answer 1

2

The straightforward solution:

  1. Calculate the angle you need to rotate the image: "current angle between points on pink image" - "angle between points on a blue image" (to more clear - angle between horizontal line and line that goes through both points)
  2. Calculate the scale: distance between points on blue / distance between points on pink

Then apply both transformations

References:

2
  • 1
    You also need to apply a translate transformation to the second image.
    – Rag
    Jan 30, 2014 at 1:30
  • @Brian Gordon: that's what OP already mentioned so I omitted as obvious
    – zerkms
    Jan 30, 2014 at 1:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.