如何将 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"/>
推荐答案
- 使用 startDrag 和 stopDragDisplayObject 上的方法,您将避免自己动手
- numChildren 将为您提供显示列表中的子项数量
- getChildIndex将为您提供显示列表中对象的索引
- setChildIndex/swapChildren 可以用于将z-index"更改为显示列表
- Use the startDrag and stopDrag method on an DisplayObject you will avoid to do it yourself
- numChildren will give you the number of children in the display list
- getChildIndex will give you the index of a object in the display list
- 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屋!