Thursday, November 11, 2010

Rotate & Scale From Center Using Matrix and mouse scroll

If you want to rotate from center then move center point to 0,0 and then after rotate reset it's to original.

Here is some sample code.

"<"mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()"">"
"<"mx:Script">"
"<"![CDATA[
import mx.events.FlexEvent;

private var st:Number = 0;
private var img:Box;

private function init():void
{
systemManager.addEventListener(MouseEvent.MOUSE_WHEEL, doMouseWheel);
can.setFocus();
}
private function mouseDownH(event:MouseEvent):void
{
event.currentTarget.startDrag(false,new Rectangle(0,0,can.width - event.currentTarget.width ,can.height- event.currentTarget.height));
}
private function mouseUpM(event:MouseEvent):void
{
event.currentTarget.stopDrag();
}
private function rotateright():void
{
if(st == 360)
st = 0;
st = st + 5;

var ofx:Number = img.width/2;
var ofy:Number = img.height/2;
var radians:Number = st * (Math.PI / 180.0);
var m:Matrix = new Matrix();

m.translate(-ofx, -ofy);
m.rotate(radians);
m.translate(ofx, ofy);
m.concat(img.transform.matrix);
img.transform.matrix = m;

st = st - 5;
}
private function rotateleft():void
{
if(st == 0)
st = 360;

st = st - 5;

var ofx:Number = img.width/2;
var ofy:Number = img.height/2;
var radians:Number = st * (Math.PI / 180.0);
var m:Matrix = new Matrix();

m.translate(-ofx, -ofy);
m.rotate(radians);
m.translate(ofx, ofy);
m.concat(img.transform.matrix);
img.transform.matrix = m;

st = st + 5;
}

private function complateLoad(event:Event):void
{
Bitmap(event.currentTarget.content).smoothing = true;
event.currentTarget.x = (can.width/2) - (event.currentTarget.width / 2);
event.currentTarget.y = (can.height/2) - (event.currentTarget.height / 2);
}
private function doMouseWheel(event:MouseEvent):void
{
trace(event.delta);
var ofx:Number = img.width/2;
var ofy:Number = img.height/2;
var m:Matrix = new Matrix();
m.translate(-ofx, -ofy);
if(event.delta "<" 0)
{
m.scale(img.scaleX + 0.2,img.scaleY + 0.2);
}
else
{
if(img.transform.matrix.a > 1)
{
m.scale(img.scaleX - 0.2,img.scaleY - 0.2);
}
else
{
return;
}
}
m.translate(ofx, ofy);
m.concat(img.transform.matrix);
img.transform.matrix = m;
}
private function selimg(curimg:Box = null ):void
{
if(curimg != null)
img = curimg;
for each(var objb:Box in can.getChildren())
{
objb.setStyle('borderThickness','1');
objb.setStyle('borderStyle','solid');
objb.setStyle('borderColor','#ffffff');
}
if(curimg != null)
{
img.setStyle('borderThickness','1');
img.setStyle('borderStyle','solid');
img.setStyle('borderColor','#00ff00');
}
}
]]">"
"<"/mx:Script>
"<"mx:Canvas id="can" height="500" width="800" backgroundColor="#cdcdcd" ">"

"<"mx:Box id="imgb1" mouseDown="mouseDownH(event)" mouseUp="{mouseUpM(event)}"
borderThickness="1" borderStyle="solid" borderColor="#ffffff" moveEffect="Blur" ">"
"<"mx:Image id="imgX1" source="GoogleIcon.jpg" complete="complateLoad(event)" click="{selimg(imgb1)}" /">"

"<"/mx:Box">"

"<"mx:Box id="imgb2" mouseDown="mouseDownH(event)" mouseUp="{mouseUpM(event)}"
borderThickness="1" borderStyle="solid" borderColor="#ffffff" moveEffect="Blur" ">"
"<"mx:Image id="imgX2" source="GoogleIcon.jpg" complete="complateLoad(event)" click="{selimg(imgb2)}" / ">"

"<"/mx:Box ">"

"<"/mx:Canvas ">"
"<"mx:Button label="Right" click="rotateright()"/ ">"
"<"mx:Button label="Left" click="rotateleft()"/ ">"
"<"mx:Button label="clear selection" click="selimg()"/ ">"
"<"/mx:Application ">"

No comments: