Home > Flash | WEB > Flex3 画像をロードして選択範囲を切り出し

Flex3 画像をロードして選択範囲を切り出し

2008-09-24 (水) 19:57
Flash | WEB
Flash | Flex3

仕事でFlex画面内で画像をコピー、ペーストするようなのが必要になったので、
とりあえずデモを作ってみた。

BitmapDataのdrawメソッドで、元画像データの一部を切り出すことができます。

>>text

ACTIONSCRIPT:

private function sliceImage(x:Number, y:Number, width:Number, height:Number):void {
var rect:Rectangle = new Rectangle(0, 0, width, height);
var matrix:Matrix = new Matrix();
matrix.tx = -x;
matrix.ty = -y;
var bitmap_data:BitmapData = new BitmapData(width, height, true);
bitmap_data.draw(img, matrix, new ColorTransform(), "normal", rect, true);
var bitmap:Bitmap = new Bitmap(bitmap_data);
this.img2.load(bitmap);
}

↓以下デモとmxml

リストから画像ファイルを選んで表示、
そのあと画像をマウスで範囲選択するとその部分が下のボックスに切り出されます。

あんまりおもしろくないね、このデモ(^-^;;

↓ mxml

>>text

ACTIONSCRIPT:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="604" height="680" creationComplete="init()">
<mx:DataGrid x="10" y="10" width="586" height="112" id="imageList" change="imageListChangeHandler(event)">
<mx:columns>
<mx:DataGridColumn headerText="読み込みファイル" dataField="col1"/>
</mx:columns>
</mx:DataGrid>
<mx:HBox x="10" y="130" width="586" height="353" backgroundAlpha="1.0" backgroundColor="#FDFDFD" id="imageBox">
<mx:Image id="img"/>
</mx:HBox>
<mx:Canvas width="566" height="333" id="slice_area" x="10" y="130">
</mx:Canvas>
<mx:ProgressBar x="206" y="247" id="imageProgress" enabled="true" mode="manual" visible="false"/>
<mx:HBox x="10" y="491" width="586" height="175" backgroundColor="#FFFEFE">
<mx:Image id="img2"/>
</mx:HBox>
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
import mx.controls.Alert;
import mx.events.ListEvent;
private var file_list:Array;
private var loader:Loader;
private var slice_sprite:Sprite;
private var startPt:Object;
private function init():void{
this.file_list = new Array("/samples/images/2663645863_0076b0f36a.jpg","/samples/images/2709117278_0ac9f695ab.jpg","/samples/images/2690301784_e553e64940.jpg");
this.imageList.dataProvider = this.file_list;
this.slice_sprite = new Sprite;
var ui_obj:UIComponent = new UIComponent;
ui_obj.addChild(slice_sprite);
this.slice_area.addChild(ui_obj);
}
private function imageListChangeHandler(event:ListEvent):void{
var url:String = this.imageList.selectedItem.toString();
var request:URLRequest = new URLRequest(url);
try {
this.loader = new Loader;
this.imageProgress.visible = true;
var loader_info:LoaderInfo = loader.contentLoaderInfo;
loader_info.addEventListener(ProgressEvent.PROGRESS, progressHandler);
loader_info.addEventListener(Event.COMPLETE, completeHandler);
this.loader.load(request);
} catch (error:Error) {
mx.controls.Alert.show("load error:" + error.message);
// (-_-;;
}
img.addEventListener(MouseEvent.MOUSE_DOWN, imageMouseDownHandler);
//img.addEventListener(MouseEvent.MOUSE_UP, imageMouseUpHandler);
//slice_sprite.addEventListener(MouseEvent.MOUSE_UP, imageMouseUpHandler);
this.addEventListener(MouseEvent.MOUSE_UP, imageMouseUpHandler);
img.addEventListener(Event.ENTER_FRAME, imageEnterFrameHandler);
}
private function progressHandler(event:ProgressEvent):void {
this.imageProgress.setProgress(event.bytesLoaded,event.bytesTotal);
}
private function completeHandler(event:Event):void {
this.imageProgress.visible = false;
var aloader:Loader = LoaderInfo(event.currentTarget).loader;
var bitmap:Bitmap = event.target.content as Bitmap;
this.slice_sprite.graphics.clear();
this.img.load(bitmap);
}
private function imageMouseDownHandler(event:Event):void{
slice_sprite.graphics.clear();
startPt = new Object;
startPt.x = img.mouseX;
startPt.y = img.mouseY;
img.addEventListener(Event.ENTER_FRAME,imageEnterFrameHandler);
}
private function imageMouseUpHandler(event:Event):void{
img.removeEventListener(Event.ENTER_FRAME,imageEnterFrameHandler);
var startX:Number = startPt.x;
var startY:Number = startPt.y;
var width:Number;
var height:Number;
if(img.mouseX <startPt.x){
width = startPt.x - img.mouseX;
startX = img.mouseX;
}else{
width = img.mouseX - startPt.x;
}
if(img.mouseY <startPt.y){
height = startPt.y - img.mouseY;
startY = img.mouseY;
}else{
height = img.mouseY - startPt.y;
}
sliceImage( startX, startY, width, height );
}
private function imageEnterFrameHandler(event:Event):void{
slice_sprite.graphics.clear();
slice_sprite.graphics.lineStyle(2, 0xFF6666);
var toX:Number = img.mouseX;
var toY:Number = img.mouseY;
if(toX <0) toX = 0;
else if(toX> img.width) toX = img.width;
if(toY <0) toY = 0;
else if(toY> this.imageBox.height) toY = this.imageBox.height;
else if(toY> img.height) toY = img.height;
slice_sprite.graphics.moveTo(startPt.x, startPt.y);
slice_sprite.graphics.lineTo(toX, startPt.y);
slice_sprite.graphics.lineTo(toX, toY);
slice_sprite.graphics.lineTo(startPt.x, toY);
slice_sprite.graphics.lineTo(startPt.x, startPt.y);
}
private function sliceImage(x:Number, y:Number, width:Number, height:Number):void {
var rect:Rectangle = new Rectangle(0, 0, width, height);
var matrix:Matrix = new Matrix();
matrix.tx = -x;
matrix.ty = -y;
var bitmap_data:BitmapData = new BitmapData(width, height, true);
bitmap_data.draw(img, matrix, new ColorTransform(), "normal", rect, true);
var bitmap:Bitmap = new Bitmap(bitmap_data);
this.img2.load(bitmap);
}
]]>
</mx:Script>
</mx:Application>

Comments:0

Trackbacks:0

Trackback URL for this entry: http://parpue.net/web/314/trackback
Listed below are links to weblogs that reference: Flex3 画像をロードして選択範囲を切り出し from parpue.net

Home > Flash | WEB > Flex3 画像をロードして選択範囲を切り出し

最近の記事

カテゴリ