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

<p>I have a crop area described with two dimensions (cropWidth, cropHeight)
I can easly compute center point of this area <code>C:[cx, cy]</code>.
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 <code>P1,P2,P3,P4</code> points which corresponds to rectangle (image) vertices.</p>

<p><a href="https://i.sstatic.net/iTj1I.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/iTj1I.png" alt="enter image description here"></a>
I can:</p>

<ul>
<li>scale image (always from center C)</li>
<li>translate it</li>
<li>rotate around the C origin</li>
</ul>

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

<pre><code>const transform = {
    scaleRatio: 1.25,
    tx: 10,
    ty: 20,
    radians: 0.21
}
</code></pre>

<p>What I'm trying to do is to follow transformation order:</p>

<ol>
<li>Move origin</li>
<li>Scale</li>
<li>Rotate</li>
<li>Translate back origin</li>
<li>Translate tx, ty</li>
</ol>

<p>How it looks like:</p>

<pre><code>const transformations = transform(
    translate(-cx, -cy),
    scale(scaleRatio),
    rotate(radians),
    transalte(cx, cy),
    translate(-tx, -ty)   
)
</code></pre>

<p>where <code>transform</code> function is simply matrix multiplication. </p>

<p>After all transformations my image can look like below:
<a href="https://i.sstatic.net/IJ4lg.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/IJ4lg.png" alt="enter image description here"></a></p>

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

CC BY-SA 4.0
2018-08-07T12:45:08.770Z
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
CC BY-SA 4.0
2018-08-07T12:55:36.233Z
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
CC BY-SA 4.0
2018-08-07T13:03:09.403Z
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
CC BY-SA 4.0
2018-08-07T13:13:08.330Z
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
CC BY-SA 4.0
2018-08-07T18:47:58.017Z
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
CC BY-SA 4.0
2018-08-08T05:48:40.740Z
I'm creating crop tool on mobile phone. You can drag image along X, Y axis, scale it and rotate it. I need to compute image vertices after all these translations. That is my problem and that is my question :)
Jacek Pudysz
<transformations><computational-geometry><matrix>
How to apply scale, translate, rotate with different origin and get new rectangle coordinates
Jacek Pudysz
# How to apply scale, translate, rotate with different origin and get new rectangle coordinates

(Asked by: username_0 on 2018-08-07)

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](https://i.sstatic.net/iTj1I.png)](https://i.sstatic.net/iTj1I.png)
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](https://i.sstatic.net/IJ4lg.png)](https://i.sstatic.net/IJ4lg.png)

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

**Tags:** transformations, computational-geometry, matrix

> **Comments:**
> **username_1**: 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?  
> **username_0**: 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.  
> **username_2**: 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 ?  
> **username_0**: 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..  
> **username_1**: 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?  
> **username_0**: I'm creating crop tool on mobile phone. You can drag image along X, Y axis, scale it and rotate it. I need to compute image vertices after all these translations. That is my problem and that is my question :)  

---

## 0 answers

