Copy link to clipboard
Copied
Hey guys I have been banging my head against this problem for the past few hours. I have a rectangle object created, I want the rectangle's rotation to follow my mouse cursor. ( I am easily able to do this). Where things get hard is that I want the rectangle to rotate around it's bottom right corner, to do this I've found that I need to use a matrix transformation. At this point I am able to have my rectangle rotate around the bottom right point, but I cannot figure out how to have it follow my mouse cursor as well while rotating. The reason being that with a matrix you can only tell it a amount of radians to rotate (matrix.rotate) rather than just being able to set its current rotation.... Here is my code
var point:Point=new Point(myRectangle.x+myRectangle.width/2, myRectangle.y+myRectangle.height/2);
function rotateObject( event:Event ):void
{
var m:Matrix=myRectangle.transform.matrix;
m.tx -= point.x;
m.ty -= point.y;
m.rotate (45*(Math.PI/180));
m.tx += point.x;
m.ty += point.y;
myRectangle.transform.matrix=m;
}
addEventListener( Event.ENTER_FRAME, rotateObject);
So with the current code it is constantly rotating around the bottom right corner, I have tried changing the "45" to "Math.atan(mouseX/mouseY), but again it seems that would only work if i could set the rotation of the matrix to that rather than telling it how much to rotate by....
Any thoughts or ideas would be much appreciated, thanks!
Sure.. make a new AS3 document, paste this into frame 1, run:
...import flash.geom.Rectangle;
import flash.display.Sprite;
import flash.events.Event;
// container, I'll use graphics and draw
// directly into it
var container:Sprite = new Sprite();
addChild(container);
// draw rectangle, pushing up on the y axis
container.graphics.beginFill(0xFF0000,1);
container.graphics.drawRect(0,-100,100,100); // see the -100 on y axis?
container.graphics.endFill();
// position it in the center of the stage
container.x = st
Copy link to clipboard
Copied
can you not calculate the new rotation based on the mouse position and the rotate by the difference with the current rotation on your rectangle?
function rotateObject( event:Event ):void
{
var newRot:Number = Math.atan(mouseX/mouseY);
var rotationDelta:Number = myRectangle.rotation - newRotation
var m:Matrix=myRectangle.transform.matrix;
m.tx -= point.x;
m.ty -= point.y;
m.rotate (rotationDelta*(Math.PI/180));
m.tx += point.x;
m.ty += point.y;
myRectangle.transform.matrix=m;
}
Copy link to clipboard
Copied
Any reason you're not simply setting the registration point to the place you want to rotate it, the bottom left?
Meaning create the rectangle in a display object (Sprite, etc) so you can just set its y position to rectangle.y -= rectangle.height;. Rotate the sprite and it'll, with much less cpu, rotate the rectangle on its bottom left corner.
Copy link to clipboard
Copied
See in the beginning i thought that i could simply move the registration point to one of the display object's corners, but when i do that and then rotate the object with code it still rotates around its center.... I would love to be able to make it that simple, I wonder why that way isn't working for me. I tried doing what you suggested Sinious, it moved my rectangle up higher but still rotates around its origin.(center). Using _spoboyle code didnt seem to help, the rectangle spins out of control like crazy... All I need is a rectangle that rotates (to follow the mouse position) but the rectangle needs to rotate around one of its corners rather than its center. You guys could probly just make your own code in a minute, im a noob
Copy link to clipboard
Copied
Sure.. make a new AS3 document, paste this into frame 1, run:
import flash.geom.Rectangle;
import flash.display.Sprite;
import flash.events.Event;
// container, I'll use graphics and draw
// directly into it
var container:Sprite = new Sprite();
addChild(container);
// draw rectangle, pushing up on the y axis
container.graphics.beginFill(0xFF0000,1);
container.graphics.drawRect(0,-100,100,100); // see the -100 on y axis?
container.graphics.endFill();
// position it in the center of the stage
container.x = stage.stageWidth / 2;
container.y = stage.stageHeight / 2;
// start rotating baby
addEventListener(Event.ENTER_FRAME, rotateMeBaby);
function rotateMeBaby(e:Event):void
{
container.rotation += 3;
}
Copy link to clipboard
Copied
Sorry its been a few days, thank you so much for that code, I think it will help me get the desired result im looking for, thank you again.