Home/ Questions/Q 966825
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T02:13:14+00:00

I am basically trying to create a display object transformation manager which will allow

  • 0

I am basically trying to create a display object transformation manager which will allow me to scale/rotate objects. I am currently trying to figure out how to rotate an object so its corner follows the current x and y of the mouse.

Example 1

Example 2

Example 3

I always get confused on the math of things like this. I know how to listen for the events and everything, I just am unsure of how to calculate the amount of rotation to apply. I will probably be rotating via a Matrix so I can rotate the object around its center, rather than the upper-left corner of it. Can anyone who is more skilled with the math of this help me out?

IN RESPONSE TO TROBADOUR

Your answer is so brilliant that I can’t understand it at all. Let me explain what I can grasp and what I can’t. Here’s a walkthrough of what I do/don’t understand:

First, save what will be the middle of the image, the so-called registration point around which we will rotate everything:

var box:Sprite = new BeautifulSprite();
box.width = box.height = 100;
/* ... */
var registrationPoint:Point = new Point(box.x + box.width / 2, 
        box.y + box.height / 2);

Am I correct so far? If so, I’ll continue.

Second, denote the original mouse-down position:

var mouseDownPoint:Point = new Point(box.mouseX, box.mouseY);

Third, store the “vector.” Problem is, I’m not sure of what you mean vector. I am familiar with Vector types in Java and AS3, in that they store a list of values of a certain type. Beyond that, I’m lost. 

var vector:* = WTF.forReals();

Next, save the distance between registrationPoint and mouseDownPoint. I remember learning about calculating distance between two points way back in high school, so I’m sure I could dig up the formula for distance between two 2d points. 

var distance:Number = calculateDistance(registrationPoint, mouseDownPoint);

I know I’m getting close! Next, to determine the constrained scale, we get the current mouse location, determine its distance to registrationPoint, and divide that by distance.

var constrainedScale:Number = calculateDistance(registrationPoint, new Point(mouseX, mouseY)) / distance;

My question here is: how do I get values when I don’t want them constrained, like scaleX and scaleY?

Now, to get the actual rotation around the registration point, I am completely lost. Could you help me out, using the variables I have defined above?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Denote the mouse co-ords of the scale/rotation centre as (x0,y0) and the mouse co-ords of the corner when in an unscaled, unrotated state as (x1,y1). Store the point (x0,y0) and cache both the vector and the distance between (x0,y0) and (x1,y1). Denote the cached vector by v0 and the distance by d0.

    To get the scale factor just compute the current mouse co-ords distance to (x0,y0) and divide that by d0.

    To get the rotation angle first calculate the vector between (x0,y0) and the current mouse co-ords. Denote this by v. Then calculate the angle by using the dot product formula

    v.v0 = |v| d0 cos(theta)

    which will give you something between 0 and pi. To get into the correct quadrant just examine the sign of the cross product of v and v0 and adjust accordingly.

    • 0