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

问题描述

以下是我的 Flex 应用程序中模块的示例代码.我想动态创建 mx.controls.Image 对象并将它们添加到显示中.我希望用户能够移动它们(如下所示)并且能够在移回数据库后更改它们的 z-index 以及记录新的 X 和 Y 坐标.如何确定 this.getChildren() 中的哪个对象是用户正在使用的选定"项目?例如，当我添加 MOUSE_OVER 事件时，它不起作用.

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. 使用 startDrag 和 stopDragDisplayObject 上的方法，您将避免自己动手
2. numChildren 将为您提供显示列表中的子项数量
3. getChildIndex将为您提供显示列表中对象的索引
4. setChildIndex/swapChildren 可以用于将z-index"更改为显示列表

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>

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