• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Rotate matrix by mouse position.

New Here ,
May 10, 2012 May 10, 2012

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!

TOPICS
ActionScript

Views

2.2K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , May 11, 2012 May 11, 2012

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

...

Votes

Translate

Translate
Advocate ,
May 11, 2012 May 11, 2012

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;

}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 11, 2012 May 11, 2012

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 11, 2012 May 11, 2012

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 11, 2012 May 11, 2012

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;

}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 16, 2012 May 16, 2012

Copy link to clipboard

Copied

LATEST

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines