FLEX: After resizing Image, imageRotate doesn't work ordinarily - apache-flex

Question

Please help me ㅠㅠ
I'm making ImageEditor. but I have a question for Image Rotating function.
When I load image and then Rotate it, Rotate function work very well.
But After resizing(width, height) loaded Image, rotate work ridiculously...
Pixed Image's width, height, It rotate only Image's content..
As a result, Quality of image go down...
This is screenshots.
Oh.. I can't post Images.. because reputation limit... :-<
http://blog.naver.com/hago89n/150164439917
Please visit my blog and confirm screenshots..
Can you understand my problem?
Um.. code is here
//resize button click handler
private function btn_resize_clickHandler(event:MouseEvent):void
{
image.width = parseInt(ti_width.text.toString());
image.height = parseInt(ti_height.text.toString());
}
//Rotate button click handler
private function btn_rotateCCW_clickHandler(event:MouseEvent):void
{//Rotate Counter ClockWise
var o_rotateimage:RotateImage = new RotateImage();
o_rotateimage.rotateCCW(image);
}
//Rotate function in RotateImage.as
public function rotateCCW(image:Image):void
{
m = new Matrix();
m.rotate(Math.PI/2);
m.tx = image.height;
var bd:BitmapData = new BitmapData(image.height as int, image.width as int);
bd.draw(image, m);
image.source = new Bitmap(bd);
}

Answer 1

I think you should do a matrix transformation for both operations.
If you just change the size of your Image object, it does not work fine in all situations.
Here is my code for this example.
//Application
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import com.imageeditor.RotateImage;
[Embed(source="/assets/img/chart.png")]
[Bindable]
public var chartPng:Class;
private var o_rotateimage:RotateImage = new RotateImage();
private function btn_resize_clickHandler(event:MouseEvent):void
{
o_rotateimage.scale(image, int(ti_width.text)/image.width, int(ti_height.text)/image.height);
}
private function btn_rotateCCW_clickHandler(event:MouseEvent):void
{
o_rotateimage.rotateCCW(image);
}
]]>
</fx:Script>
<s:VGroup x="10" y="10">
<s:HGroup>
<s:TextInput id="ti_width" text="300" width="40"/>
<s:TextInput id="ti_height" text="200" width="40"/>
<s:Button label="Resize" click="btn_resize_clickHandler(event)"/>
<s:Button label="Rotate" click="btn_rotateCCW_clickHandler(event)"/>
</s:HGroup>
<s:HGroup width="800" height="600" horizontalAlign="center" verticalAlign="middle">
<s:Image id="image" source="{chartPng}" width="600" height="400"/>
</s:HGroup>
</s:VGroup>
</s:Application>
//RotateImage.as
package com.imageeditor
{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.geom.Matrix;
import spark.components.Image;
public class RotateImage
{
private var m:Matrix;
public function rotateCCW(image:Image):void
{
var w:int = image.width;
var h:int = image.height;
m = new Matrix();
m.rotate(Math.PI/2);
m.tx = image.height;
var bd:BitmapData = new BitmapData(image.height as int, image.width as int);
bd.draw(image, m);
image.width = h;
image.height = w;
image.source = new Bitmap(bd);
}
public function scale(image:Image, kx:Number, ky:Number):void
{
var w:int = image.width;
var h:int = image.height;
m = new Matrix();
m.scale(kx, ky);
var bd:BitmapData = new BitmapData(w*kx as int, h*ky as int);
bd.draw(image, m);
image.width = w*kx;
image.height = h*ky;
image.source = new Bitmap(bd);
}
}
}