如何使用 ActionScript 拖动图像以在屏幕上平滑移动? [英] How to drag an image to move it smoothly on screen, with ActionScript?
问题描述
我以为这是一个简单的任务,但我错了.
I was thinking this is a simple task, but I'm wrong.
我使用精灵来显示图像,当用户拖动它时(MOUSE_DOWN 和 MOUSE_MOVE),我在 MOUSE_MOVE
中获取位置并计算偏移量:
I used a sprite to display an image, and when user drag it(MOUSE_DOWN and MOUSE_MOVE), I got the position in MOUSE_MOVE
and calculated the offsets:
var current: Point = new Point(event.localX, event.localY);
sprite.x = current.x - start.x;
sprite.y = current.y - start.y;
它有效但不流畅.有没有更好的解决方案?
It works but not smooth. Is there a better solution?
更新
调试了一天,终于找到原因了.
After a day of debugging, I finally found the reason.
更大的fps可以让它更流畅,但这不是这个问题的关键.
Bigger fps can make it smoother, but it's not the key of this question.
关键是我应该使用stage
来听MOUSE_MOVE
,而不是图像本身.当获取鼠标位置时,我应该使用 event.stageX/Y
(或 stage.mouseX/Y
),而不是 event.localX/Y
>.来自运动图像的 event.localX/Y
既不稳定也不平滑,这导致了我的问题.
The key is I should use stage
to listen MOUSE_MOVE
, not the image itself. And when getting the mouse position, I should use event.stageX/Y
(or stage.mouseX/Y
), not event.localX/Y
. The event.localX/Y
from the moving image, is neither stable nor smooth, that causes my problem.
以下是我的工作代码,享受它:)
Following is my working code, enjoy it :)
package {
import flash.display.Bitmap;
import flash.display.Loader;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Matrix;
import flash.geom.Point;
import flash.net.URLRequest;
import flash.text.TextField;
public class DragIssue extends Sprite {
private static const URL: String = "assets/m1.jpg";
private var self: DragIssue;
private var sprite: Sprite;
private var startPoint: Point;
private var offsetX: Number = 0;
private var offsetY: Number = 0;
public function DragIssue() {
self = this;
init();
loadImage();
}
protected function init(): void {
if (stage == null) {
this.addEventListener(Event.ADDED_TO_STAGE, on_addedToStage);
} else {
stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
}
function on_addedToStage(event: Event): void {
self.removeEventListener(Event.ADDED_TO_STAGE, on_addedToStage);
stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
}
}
public function loadImage(): void {
var loader: Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
loader.load(new URLRequest(URL));
function imageLoaded(event: Event): void {
var bitmap: Bitmap = event.target.content as Bitmap;
self.sprite = new Sprite();
sprite.addChild(bitmap);
self.addChild(sprite);
sprite.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
sprite.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
}
}
private function onMouseMove(event: MouseEvent): void {
if (startPoint) {
sprite.x = offsetX + event.stageX - startPoint.x;
sprite.y = offsetY + event.stageY - startPoint.y;
}
}
private function onMouseUp(event: MouseEvent): void {
startPoint = null;
offsetX = sprite.x;
offsetY = sprite.y;
}
private function onMouseDown(event: MouseEvent): void {
startPoint = new Point(event.stageX, event.stageY);
}
}
}
推荐答案
在这里,试试这个.它只是一个简单的黑色方块,但在您真的开始拖动它之前它看起来很好.如前所述,将帧率设置为更高的值是理想的.在这种情况下,出于内存原因,我决定在 MOUSE_DOWN 中将帧率提高到 60fps,并在 MOUSE_UP 中将其降回 24.显然,您可以随心所欲地改变它.
Here, try this. It's just a simple black square, but it looks fine until you really start dragging it around. As was mentioned, setting the framerate to something higher is ideal. In this case, I decided to up the framerate to 60fps in the MOUSE_DOWN and drop it back to 24 in MOUSE_UP for memory reasons. You can obviously change that how you please.
import flash.display.*;
import flash.events.*;
var startX:Number;
var startY:Number;
var shape:Sprite = new Sprite();
shape.graphics.beginFill(0x000000);
shape.graphics.drawRect(0,0,50,50);
shape.graphics.endFill();
this.addChild(shape);
shape.addEventListener(MouseEvent.MOUSE_DOWN,this.mouseDown);
function mouseDown(e:MouseEvent = null):void{
stage.frameRate = 60;
startX = stage.mouseX - shape.x;
startY = stage.mouseY - shape.y;
stage.addEventListener(MouseEvent.MOUSE_MOVE,this.mouseMove);
shape.addEventListener(MouseEvent.MOUSE_UP,this.mouseUp);
}
function mouseMove(e:MouseEvent = null):void{
shape.x = stage.mouseX - startX;
shape.y = stage.mouseY - startY;
}
function mouseUp(e:MouseEvent = null):void{
shape.removeEventListener(MouseEvent.MOUSE_UP,this.mouseUp);
stage.removeEventListener(MouseEvent.MOUSE_MOVE,this.mouseMove);
stage.frameRate = 24;
}
确保您正在移除 MOUSE_UP 上的 MOUSE_MOVE 事件.这是关键.否则,您在每个 MOUSE_DOWN 上重新添加该事件并最终同时重复运行相同的代码.抱歉,我的语法不是 100% 正确;我在 CS5.5 中非常快速地将这些组合在一起,而不是在 Flash Builder 中进行.
Make sure you are removing the MOUSE_MOVE event on MOUSE_UP. That is key. Otherwise, you re-add the event on every MOUSE_DOWN and end up running the same code repeatedly, simultaneously. Sorry my syntax isn't 100% proper; I threw this together really quick in CS5.5 rather than doing it in Flash Builder.
这篇关于如何使用 ActionScript 拖动图像以在屏幕上平滑移动?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!