I was reading other questions in this topic but I couldn't apply any viable solution to solve my use case.

I have a crop area described with two dimensions (cropWidth, cropHeight) I can easly compute center point of this area C:[cx, cy]. At the begining I have perfectly aligned image to the crop area. We can assume that image width and height are equal to cropWidth and cropHeight (figure below). We can also calculate P1,P2,P3,P4 points which corresponds to rectangle (image) vertices.

enter image description here I can:

  • scale image (always from center C)
  • translate it
  • rotate around the C origin

Let's say that I would like to do everything (translate, scale, rotate) and receive new image position I1, I2, I3 ,I4. I have access to object which describe all translations eg.:

const transform = {
    scaleRatio: 1.25,
    tx: 10,
    ty: 20,
    radians: 0.21
}

What I'm trying to do is to follow transformation order:

  1. Move origin
  2. Scale
  3. Rotate
  4. Translate back origin
  5. Translate tx, ty

How it looks like:

const transformations = transform(
    translate(-cx, -cy),
    scale(scaleRatio),
    rotate(radians),
    transalte(cx, cy),
    translate(-tx, -ty)   
)

where transform function is simply matrix multiplication.

After all transformations my image can look like below: enter image description here

No matter what I'm not able to receive correct values of all image vertices. Can someone point me to right approach?

  • What do you mean by 5. Translate tx, ty. And explain what do you mean by correct image values for vertices? Do you want the image to fit to the crop area even after transformation, is that what you mean by correct? – gallickgunner Aug 7 at 12:45
  • By 5 I mean simply drag along x or y axis. For the second question - yes and no. For now i want to compute image vertices and then try to fit it or to undo 5th (translate) operation. – Jacek Pudysz Aug 7 at 12:55
  • Your image looks how I would expect it to look after it has been rotated around its own centre and then translated by some amount in both X & Y ? What is your expected result ? – PaulHK Aug 7 at 13:03
  • I created POC in my app to validate algorithm eg. I'm rotating image, scaling it and translating along both axis to fit my image's top left corner to crop's top left corner. My example response: [-4.5, -6.0][924.2, -1.5][-9.6, 1056.1][919.0, 1060.6] And as you can see first vertex is not even close to [0,0] I'm wondering that maybe translations are not applied in correct order.. – Jacek Pudysz Aug 7 at 13:13
  • I don't understand what do you mean, but are you sure your image's top left corner should coincide with the crop's? How are you validating this? – gallickgunner Aug 7 at 18:47

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.