i'm attempting to control 2 different shapes (a red rectangle and a blue rectangle) with the same sequence of mouse events (down, move, up), but only one shape at a time must move.
the shapes are locked horizontally along the x-axis.
the red rectangle, which starts out on the left side 开发者_运维知识库of the stage, has a right-registration while the the blue rectangle on the right side of the stage has a left-registration. the rectangle that moves during the MOUSE_MOVE events is the shape that is closest to the *MOUSE_MOVE* event's stageX property.
the closest rectangle is determined by averaging the x property of each rectangle (averageX)in relation to the MOUSE_MOVE stageX property. therefore, if stageX is less than averageX, the shape on the left should move. grater than averageX, the shape on the right.
the problem occurs when control changes rectangles during subsequent MOUSE_MOVE events, before MOUSE_UP. variables that are set during MOUSE_DOWN are appropriate for the rectangle that is moved first, but things become dicey when the other rectangle is to be moved instead.
basically, the rectangle whose x property is closest to MOUSE_MOVE event's stageX property should move along either left or right with the mouse event, one at a time.
for simplicity with the following code example, a MOUSE_DOWN event could always occur somewhere between the two rectangles.
package
{
import flash.display.Sprite;
import flash.display.Shape;
import flash.events.MouseEvent;
//Class
public class RectsTest extends Sprite
{
//Variables
private var redRect:Shape;
private var blueRect:Shape;
private var mouseDownOrigin:Number;
private var redRectOrigin:Number;
private var blueRectOrigin:Number;
private var averageX:Number;
//Constructor
public function RectsTest()
{
init();
}
//Initialize
private function init():void
{
redRect = createRect(0xFF0000, -200, 200, 100);
redRect.x = 200;
redRect.y = 200;
blueRect = createRect(0x0000FF, 0, 200, 100);
blueRect.x = stage.stageWidth - 200;
blueRect.y = 300;
addChild(redRect);
addChild(blueRect);
stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownEventHandler);
}
//Create Rect
private function createRect(color:Number, x:Number, width:Number, height:Number):Shape
{
var result:Shape = new Shape();
result.graphics.beginFill(color);
result.graphics.drawRect(x, 0, width, height);
result.graphics.endFill();
return result;
}
//Mouse Down Event Handler
private function mouseDownEventHandler(evt:MouseEvent):void
{
mouseDownOrigin = evt.stageX;
redRectOrigin = redRect.x;
blueRectOrigin = blueRect.x;
averageX = (redRect.x + blueRect.x) / 2;
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpEventHandler);
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveEventHandler);
}
//Mouse Move Event Handler
private function mouseMoveEventHandler(evt:MouseEvent):void
{
if (evt.stageX < averageX)
redRect.x = redRectOrigin + evt.stageX - mouseDownOrigin;
if (evt.stageX > averageX)
blueRect.x = blueRectOrigin + evt.stageX - mouseDownOrigin;
averageX = (redRect.x + blueRect.x) / 2;
}
//Mouse Up Event Handler
private function mouseUpEventHandler(evt:MouseEvent):void
{
stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpEventHandler);
stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveEventHandler);
}
}
}
You should check, which Rect will be moved before registering mouseMoveHandler. And then change the position of necessary rectangle. I used currentRect variable to represent movable rect:
package
{
import flash.display.Sprite;
import flash.display.Shape;
import flash.events.MouseEvent;
//Class
public class RectsTest extends Sprite
{
//Variables
private var redRect:Shape;
private var blueRect:Shape;
private var mouseDownOrigin:Number;
private var redRectOrigin:Number;
private var blueRectOrigin:Number;
private var averageX:Number;
//Constructor
public function RectsTest()
{
init();
}
//Initialize
private function init():void
{
redRect = createRect(0xFF0000, -200, 200, 100);
redRect.x = 200;
redRect.y = 200;
blueRect = createRect(0x0000FF, 0, 200, 100);
blueRect.x = stage.stageWidth - 200;
blueRect.y = 300;
addChild(redRect);
addChild(blueRect);
stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownEventHandler);
}
//Create Rect
private function createRect(color:Number, x:Number, width:Number, height:Number):Shape
{
var result:Shape = new Shape();
result.graphics.beginFill(color);
result.graphics.drawRect(x, 0, width, height);
result.graphics.endFill();
return result;
}
//Mouse Down Event Handler
private function mouseDownEventHandler(evt:MouseEvent):void
{
mouseDownOrigin = evt.stageX;
redRectOrigin = redRect.x;
blueRectOrigin = blueRect.x;
averageX = (redRect.x + blueRect.x) / 2;
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpEventHandler);
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveEventHandler);
}
//Mouse Move Event Handler
private function mouseMoveEventHandler(evt:MouseEvent):void
{
if (evt.stageX < averageX) {
redRect.x = redRectOrigin + evt.stageX - mouseDownOrigin;
redRectOrigin = redRect.x;
}
if (evt.stageX > averageX) {
blueRect.x = blueRectOrigin + evt.stageX - mouseDownOrigin;
blueRectOrigin = blueRect.x;
}
mouseDownOrigin = evt.stageX;
averageX = (redRect.x + blueRect.x) / 2;
}
//Mouse Up Event Handler
private function mouseUpEventHandler(evt:MouseEvent):void
{
stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpEventHandler);
stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveEventHandler);
}
}
}
精彩评论