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),
    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?

  • $\begingroup$ 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? $\endgroup$ Aug 7, 2018 at 12:45
  • $\begingroup$ 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. $\endgroup$ Aug 7, 2018 at 12:55
  • $\begingroup$ 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 ? $\endgroup$
    – PaulHK
    Aug 7, 2018 at 13:03
  • $\begingroup$ 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.. $\endgroup$ Aug 7, 2018 at 13:13
  • $\begingroup$ 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? $\endgroup$ Aug 7, 2018 at 18:47


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy