如何动态添加图像对象到显示器，然后与它们交互？ [英] How do I dynamically add Image objects to the display and then interact with them?

问题描述

下面是我在Flex应用程序中使用的模块示例代码。我想动态创建mx.controls.Image对象并将其添加到显示。我希望用户能够移动它们（这个工作如下），并且能够改变他们的Z-索引以及在移回数据库之后记录新的X和Y坐标。如何确定this.getChildren（）中的哪个对象是用户正在使用的选定项目？

 <？xml version =1.0encoding = UTF-8 >？; 
  

  import flash.display.DisplayObject; 
 import flash.events.MouseEvent; 
导入mx.controls.Image; 
 
 public var draggedObject：DisplayObject; 
 public var selectedObject：DisplayObject; 
 public var offsetX：Number; 
 public var offsetY：Number; 
 
 $ b $ public function Add（）：void 
 {
 var _image：Image = new Image; 
 _image.source =myimage.png; 
 _imagem.x = 100; 
 _image.y = 100; 
 _image.addEventListener（MouseEvent.MOUSE_DOWN，startDragging）; 
 _image.addEventListener（MouseEvent.MOUSE_UP，stopDragging）; 
 this.addChild（_image）; 
} 
 
 //当按下鼠标按钮时调用此函数。 
 public function startDragging（event：MouseEvent）：void 
 {
 //记住哪个对象被拖拽
 draggedObject = DisplayObject（event.target）; 
 selectedObject = draggedObject; 
 
 //记录当
 //鼠标按钮被按下时光标所在的位置与
的x，y坐标之间的差异（偏移量）按下鼠标按钮。 
 offsetX = event.stageX  -  draggedObject.x; 
 offsetY = event.stageY  -  draggedObject.y; 
 
 //将所选对象移动到显示列表的顶部
 //stage.addChild（dragragObject）; 
 
 //告诉Flash Player开始侦听mouseMove事件。 
 stage.addEventListener（MouseEvent.MOUSE_MOVE，dragObject）; 
} 
 
 //当释放鼠标按钮时调用此函数。 
 public function stopDragging（event：MouseEvent）：void 
 {
 //告诉Flash Player停止侦听mouseMove事件。 
 stage.removeEventListener（MouseEvent.MOUSE_MOVE，dragObject）; 
} 
 
 //每当鼠标移动时，就会调用这个函数，
 //只要鼠标按钮被按下。 
 public function dragObject（event：MouseEvent）：void 
 {
 //将拖动的对象移动到游标位置，维护
 //游标位置和拖动对象的位置
 //。 
 draggedObject.x = event.stageX  -  offsetX; 
 draggedObject.y = event.stageY  -  offsetY; 
 
 //指示Flash Player在此事件之后刷新屏幕。 
 event.updateAfterEvent（）; 
} 
]]> 
< / mx：Script> 
< mx：Button x =83y =93label =New Imageclick =this.Add（）/> 
< mx：标签x =83y =138id =label1/> 
< mx：标签x =83y =164id =label2/> 
  

解决方案

1. 使用 startDrag 和 stopDrag 方法，你将避免自己做一个DisplayObject的方法


2. numChildren 会给你显示列表中的子元素数量
   
3. getChildIndex 会给你一个对象的索引在显示列表中


4. setChildIndex / swapChildren 可用于将z-index更改为显示列表





所以混合这个不同的函数可能会导致：



 <？xml version =1.0encoding =utf-8？> 
 < mx：Script> 
<！[CDATA [
 import mx.controls.Image; 
 
 private function addImage（）：void {
 var img：Image = new Image（）; 
 img.source = imgClass; 
 img.addEventListener（MouseEvent.MOUSE_DOWN，onMouseDown，false，0，true）; 
 canvas.addChild（img）; 
 
 
私有函数onMouseUp（e：MouseEvent）：void {
 var img：Image = e.currentTarget as Image; 
 if（img！== null）{
 stopDrag（）; 
 img.removeEventListener（MouseEvent.MOUSE_UP，onMouseUp）; 
 
 
 $ b private函数onMouseDown（e：MouseEvent）：void {
 var img：Image = e.currentTarget as Image; 
 if（img！== null）{
 var parent：DisplayObjectContainer = img.parent; 
 
 //获取图片的索引并按照你的要求做
 var idxImg：int = parent.getChildIndex（img）; 
 
 //将点击的对象放在列表的顶部
 parent.setChildIndex（img，parent.numChildren  -  1）; 
 
 img.addEventListener（MouseEvent.MOUSE_UP，onMouseUp，false，0，true）; 
 img.startDrag（）; 
 
 
 
嵌入（source =assets / logo.png）] 
 private var imgClass：Class; 
]]> 
< / mx：Script> 
< mx：Canvas id =canvas> 
< mx：Button label =addclick =addImage（）>< / mx：Button> 
< / mx：Canvas> 
< / mx：Application> 
  




Below is sample code from a Module I have in my Flex app. I want to dynamically create mx.controls.Image objects and add them to the display. I want the user to be able to move them (this works as below) and be able to change their z-index as well as record new X and Y coords after moving back to the database. How do I determine which object in this.getChildren() is the 'selected' item the user is working with? When I add a MOUSE_OVER event, for example, it does not work.

<?xml version="1.0" encoding="utf-8"?>

        import flash.display.DisplayObject;
        import flash.events.MouseEvent;
        import mx.controls.Image;

        public var draggedObject:DisplayObject;
        public var selectedObject:DisplayObject;
        public var offsetX:Number;
        public var offsetY:Number;


        public function Add():void
        {
            var _image:Image = new Image;
            _image.source = "myimage.png";
            _imagem.x = 100;
            _image.y = 100;
            _image.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
            _image.addEventListener(MouseEvent.MOUSE_UP, stopDragging);
            this.addChild(_image);
        }

        // This function is called when the mouse button is pressed.
        public function startDragging(event:MouseEvent):void
        {
            // remember which object is being dragged
            draggedObject = DisplayObject(event.target);
            selectedObject = draggedObject;

            // Record the difference (offset) between where the cursor was when
            // the mouse button was pressed and the x, y coordinate of the
            // dragged object when the mouse button was pressed.
            offsetX = event.stageX - draggedObject.x;
            offsetY = event.stageY - draggedObject.y;

            // move the selected object to the top of the display list
            //stage.addChild(draggedObject);

            // Tell Flash Player to start listening for the mouseMove event.
            stage.addEventListener(MouseEvent.MOUSE_MOVE, dragObject);                  
        }

        // This function is called when the mouse button is released.
        public function stopDragging(event:MouseEvent):void
        {
            // Tell Flash Player to stop listening for the mouseMove event.
            stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragObject);
        }

        // This function is called every time the mouse moves,
        // as long as the mouse button is pressed down.
        public function dragObject(event:MouseEvent):void
        {
            // Move the dragged object to the location of the cursor, maintaining 
            // the offset between the cursor's location and the location 
            // of the dragged object.
            draggedObject.x = event.stageX - offsetX;
            draggedObject.y = event.stageY - offsetY;

            // Instruct Flash Player to refresh the screen after this event.
            event.updateAfterEvent();
        }
    ]]>
</mx:Script>
<mx:Button x="83" y="93" label="New Image" click="this.Add()"/>
<mx:Label x="83" y="138" id="label1"/>
<mx:Label x="83" y="164" id="label2"/>

解决方案

1. Use the startDrag and stopDrag method on an DisplayObject you will avoid to do it yourself
2. numChildren will give you the number of children in the display list
3. getChildIndex will give you the index of a object in the display list
4. setChildIndex / swapChildren can be used to change the "z-index" into the display list

So mixing this different functions you could end up with:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
    import mx.controls.Image;

    private function addImage() : void {
        var img : Image = new Image();
        img.source = imgClass;
        img.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown, false, 0, true);
        canvas.addChild(img);
    }

    private function onMouseUp(e : MouseEvent) : void {
        var img : Image = e.currentTarget as Image;
        if (img !== null) {
            stopDrag();
            img.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp);
        }
    }

    private function onMouseDown(e : MouseEvent) : void {
        var img : Image = e.currentTarget as Image;
        if (img !== null) {
            var parent : DisplayObjectContainer = img.parent;

           // get the index of the image and do what you want with it
            var idxImg : int = parent.getChildIndex(img);

           // put the clicked object on top of the list
            parent.setChildIndex(img, parent.numChildren - 1);

            img.addEventListener(MouseEvent.MOUSE_UP, onMouseUp, false, 0, true);
            img.startDrag();
        }
    }

    [Embed(source="assets/logo.png")]
    private var imgClass : Class;
]]>
</mx:Script>
<mx:Canvas id="canvas">
    <mx:Button label="add" click="addImage()"></mx:Button>
</mx:Canvas>
</mx:Application>

这篇关于如何动态添加图像对象到显示器，然后与它们交互？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！