状況
今日は「ブロックとかをドラッグ&ドロップで配置したい」という作業まわりだけで終わってしまった。
詰まったのは、
- Listにグラフィックを追加する場合、UIComponentじゃないといけない?
- Spriteを入れようとしてまず詰まる
- Imageにするも、並んで表示されずに詰まる
- Imageのheightなどを設定して、ようやく並んで表示される
- ドラッグ&ドロップの対応
- event.targetではなくevent.currentTargetで対象を取得
- さらに、currentTargetはObjectなので、「as UIComponent」でキャスト
あたり。
まだ、ドラッグ&ドロップの時に「ドラッグしてる時の見た目」と「ドロップした後の見た目」の位置が違うので、そこの調整をしたいが今日はもう時間がないので、平日に続きをやる予定。
swf
一応、左の「HOGEHOGE」や「FOOBAR」を中央のキャンバスにドラッグ&ドロップできる。配置したものをさらにドラッグ&ドロップ可能。それ以外はただ配置しているだけ。
参考リンク
- プログラマのためのFlash遊び方:特集|gihyo.jp … 技術評論社
- Flex 2.0でリッチなWebアプリを作ろう---目次 | 日経 xTECH(クロステック)
- Flexアプリの直感的なドラッグ&ドロップを体験しよう (2/2):現場で使えるFlex実践テクニック(3) - @IT
- 画像のドラッグ&ドロップによるリストへの追加
- http://livedocs.adobe.com/flex/2_jp/langref/mx/events/DragEvent.html
- ドラッグイベントまわりの情報
- http://livedocs.adobe.com/flex/2_jp/langref/mx/core/DragSource.html
- ドラッグされるものの情報
- http://livedocs.adobe.com/flex/2_jp/langref/mx/managers/DragManager.html
- ドラッグを行うやつの情報
コード
<?xml version="1.0" encoding="UTF-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="init()"> <!--Script--> <mx:Script> <![CDATA[ import mx.events.DragEvent; import mx.core.UIComponent; import mx.core.IFlexDisplayObject; import mx.core.DragSource; import mx.controls.Image; import mx.managers.DragManager; private function init():void{ drop_item_box.addChild(CreateAASprite("HOGE\nHOGE")); drop_item_box.addChild(CreateAASprite("FOO\nBAR")); } protected function CreateAASprite(in_Text:String):Image{ //まずは文字列を普通に表示するものを作成 var text_field:TextField = new TextField(); { text_field.text = in_Text; text_field.border = false; text_field.x = 0; text_field.y = 0; text_field.width = 99; text_field.height = 99; } //その内容をビットマップデータとして取り込む var bmp_data : BitmapData = new BitmapData(text_field.textWidth+5, text_field.textHeight+5, true , 0x00000000); { var matrix : Matrix = new Matrix(1,0,0,1,0,0); var color : ColorTransform = new ColorTransform(1,1,1,1,0,0,0,0); var rect : Rectangle = new Rectangle(0,0,bmp_data.width,bmp_data.height); bmp_data.draw(text_field, matrix, color, BlendMode.NORMAL, rect, true); } //取り込んだビットマップデータを表示 var bmp_obj:Bitmap = new Bitmap( bmp_data , PixelSnapping.AUTO , true); // { // bmp_obj.x = -text_field.textWidth*0.5; // bmp_obj.y = -text_field.textHeight*0.5; // } var image:Image = new Image(); { image.width = bmp_obj.width; image.height = bmp_obj.height; image.addChild(bmp_obj); image.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler_Create); } return image; } //ドラッグできるデータを新規作成してドラッグ開始 private function mouseDownHandler_Create(event:MouseEvent):void{ var trg:UIComponent = event.currentTarget as UIComponent; var image:Image = new Image(); { var bitmapData:BitmapData = new BitmapData(trg.width, trg.height, true , 0x00000000); { bitmapData.draw(trg); } var bitmap:Bitmap = new Bitmap(); { bitmap.bitmapData = bitmapData; } image.width = bitmap.width; image.height = bitmap.height; image.addChild(bitmap); image.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); } //ドラッグ中のイメージを作成 var imageProxy:UIComponent = new UIComponent(); { imageProxy.addChild(image); } //ドラッグされるデータを作成 var dragSource:DragSource = new DragSource(); { dragSource.addData(image, "img"); } //ドラッグを開始 DragManager.doDrag(trg, dragSource, event, imageProxy); } //対象をドラッグする private function mouseDownHandler(event:MouseEvent):void{ var trg:UIComponent = event.currentTarget as UIComponent; //ドラッグされるデータを作成 var dragSource:DragSource = new DragSource(); dragSource.addData(trg, "img"); //ドラッグ中のイメージを作成 var imageProxy:UIComponent = new UIComponent(); { var bitmapData:BitmapData = new BitmapData(trg.width, trg.height, true , 0x00000000); { bitmapData.draw(trg); } var bitmap:Bitmap = new Bitmap(); { bitmap.bitmapData = bitmapData; } imageProxy.addChild(bitmap); } //ドラッグを開始 DragManager.doDrag(trg, dragSource, event, imageProxy); } private function dragEnterHandler(event:DragEvent):void{ var trg:UIComponent = event.currentTarget as UIComponent; DragManager.acceptDragDrop(trg); } private function dragOverHandler(event:DragEvent):void{ // var trg:UIComponent = event.currentTarget as UIComponent; // trg.setStyle("backgroundColor", "#FFFF99"); } private function dragExitHandler(event:DragEvent):void{ // var trg:UIComponent = event.currentTarget as UIComponent; // trg.setStyle("backgroundColor", "#FFFFFF"); } private function dragDropHandler(event:DragEvent):void{ var trg:UIComponent = event.currentTarget as UIComponent; var image:UIComponent = event.dragSource.dataForFormat("img") as UIComponent; image.x = event.localX; image.y = event.localY; trg.addChild(image); } private function dragCompleteHandler(event:DragEvent):void{ // var trg:UIComponent = event.currentTarget as UIComponent; // trg.setStyle("backgroundColor", "#FFFFFF"); } public function changeLX(event:Event):void { //stepValue.text = "Value Selected is " + event.target.value; } public function changeRX(event:Event):void { //stepValue.text = "Value Selected is " + event.target.value; } public function changeUY(event:Event):void { //stepValue.text = "Value Selected is " + event.target.value; } public function changeDY(event:Event):void { //stepValue.text = "Value Selected is " + event.target.value; } ]]> </mx:Script> <!--View--> <mx:Panel title="Owata Editor" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10"> <mx:HBox borderStyle="solid"> <!--Left--> <mx:VBox borderStyle="solid" id = "drop_item_box"> </mx:VBox> <!--Center--> <mx:Canvas borderStyle="solid" id="myCanvas" backgroundColor="#FFFFFF" width="400" height="300" dragEnter="dragEnterHandler(event)" dragOver="dragOverHandler(event)" dragExit="dragExitHandler(event)" dragDrop="dragDropHandler(event)" /> <!--Right--> <mx:HBox borderStyle="solid"> <!--List--> <mx:HBox borderStyle="solid"> <mx:VBox borderStyle="solid"> <mx:List id="my_obj_list" width="100"/> <mx:HBox borderStyle="solid"> <mx:Label text="Add"/> <mx:Label text="Del"/> </mx:HBox> </mx:VBox> </mx:HBox> <!--Param--> <mx:VBox borderStyle="solid"> <!--Top--> <mx:HBox borderStyle="solid"> <mx:VBox borderStyle="solid" horizontalAlign="left"> <mx:Label id="label_hoge" text="Category"/> <mx:ComboBox id="object_category"/> </mx:VBox> <mx:VBox borderStyle="solid" horizontalAlign="left"> <mx:Label text="Name"/> <mx:TextInput id="my_obj_name" text="Block 1" color="#000000"/> </mx:VBox> </mx:HBox> <!--Center--> <mx:Grid borderStyle="solid"> <mx:GridRow borderStyle="none" id="row1"> <mx:GridItem borderStyle="none" > <!--empty--> </mx:GridItem> <mx:GridItem borderStyle="none" horizontalAlign="right"> <mx:Label text="UY:" textAlign="right"/> </mx:GridItem> <mx:GridItem borderStyle="none" > <mx:NumericStepper id="val_uy" change="changeUY(event);" value="0" minimum="-9999" maximum="9999"/> </mx:GridItem> <mx:GridItem borderStyle="none" > <!--empty--> </mx:GridItem> </mx:GridRow> <mx:GridRow borderStyle="none" id="row2"> <mx:GridItem borderStyle="none" horizontalAlign="right"> <mx:Label text="LX:" textAlign="right"/> </mx:GridItem> <mx:GridItem borderStyle="none" > <mx:NumericStepper id="val_lx" change="changeLX(event);" value="0" minimum="-9999" maximum="9999"/> </mx:GridItem> <mx:GridItem borderStyle="none" horizontalAlign="right"> <mx:Label text="RX:" textAlign="right"/> </mx:GridItem> <mx:GridItem borderStyle="none" > <mx:NumericStepper id="val_rx" change="changeRX(event);" value="0" minimum="-9999" maximum="9999"/> </mx:GridItem> </mx:GridRow> <mx:GridRow borderStyle="none" id="row3"> <mx:GridItem borderStyle="none" > <!--empty--> </mx:GridItem> <mx:GridItem borderStyle="none" horizontalAlign="right"> <mx:Label text="DY:" textAlign="right"/> </mx:GridItem> <mx:GridItem borderStyle="none" > <mx:NumericStepper id="val_dy" change="changeDY(event);" value="0" minimum="-9999" maximum="9999"/> </mx:GridItem> <mx:GridItem borderStyle="none" > <!--empty--> </mx:GridItem> </mx:GridRow> </mx:Grid> <!--Bottom--> </mx:VBox> </mx:HBox> </mx:HBox> </mx:Panel> </mx:Application>