# Image Transform Controls

**URL:** <https://phaser.discourse.group/t/image-transform-controls/5954>\
**Category:** Phaser 3\
**Created:** [April 18, 2020, 1:04pm UTC](https://phaser.discourse.group/t/image-transform-controls/5954 "2020-04-18T13:04:33Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![boomboom](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/boomboom/32/3165_2.png) [@boomboom](https://phaser.discourse.group/u/boomboom)\
**Post date:** [April 18, 2020, 1:04pm UTC](https://phaser.discourse.group/t/image-transform-controls/5954/1 "2020-04-18T13:04:33Z")

</div>

I am trying to implement the following control scheme on images within my game:

![Peek 2020-04-18 17-00](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/a/a7c33657a9081c62622857c2d10587acf15de5b0.gif)

This was taken from [http://fabricjs.com/](http://fabricjs.com/) (when you click on an element you get the transform controls show, and the image can be dragged, scaled and rotated)

I found this old example [https://codepen.io/jdnichollsc/details/KgdRvV](https://codepen.io/jdnichollsc/details/KgdRvV) however it looks incomplete as scaling isn’t working.

I am at a bit of a loss on how to achieve the control within the gif in Phaser. Is there any complete examples of this working or pointers on the steps and maths involved?

---

<div class="post-metadata">

**Author:** ![123survesh](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/123survesh/32/2274_2.png) [@123survesh](https://phaser.discourse.group/u/123survesh)\
**Post date:** [April 18, 2020, 6:53pm UTC](https://phaser.discourse.group/t/image-transform-controls/5954/2 "2020-04-18T18:53:37Z")

</div>

Hey @boomboom, I looked at the Code pen link, I made some edits to make the image scale when dragging the respective edge squares. I wrote the basic logic for scaling the image, it still needs some visual polish though. See if it helps.  
https://codepen.io/123survesh/embed/preview/NWGrvZz?height=300&slug-hash=NWGrvZz&default-tabs=js,result&host=https://codepen.io

---

<div class="post-metadata">

**Author:** ![123survesh](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/123survesh/32/2274_2.png) [@123survesh](https://phaser.discourse.group/u/123survesh)\
**Post date:** [April 18, 2020, 6:54pm UTC](https://phaser.discourse.group/t/image-transform-controls/5954/3 "2020-04-18T18:54:39Z")

</div>

And the code pen uses Phaser version 2, I would suggest using version 3 if you are going to start the project new.

---

<div class="post-metadata">

**Author:** ![vlkpa](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/vlkpa/32/6733_2.png) [@vlkpa](https://phaser.discourse.group/u/vlkpa)\
**Post date:** [July 8, 2022, 11:55am UTC](https://phaser.discourse.group/t/image-transform-controls/5954/4 "2022-07-08T11:55:06Z")

</div>

Does anyone have an example/Code pen in version 3?