Question

我正在Adobe Animate中使用ActionScript 3来缩放和平移图形。每当单击控制面板中的中央按钮时，图像就不会出现在中央，而是会出现在下方。

Example of how photo inside MovieClip is not centred to the stage。

此外，平移和缩放也不平滑。我使用的代码是创建图像的视频剪辑，并且有一个控制面板来控制缩放和平移。请让我知道使它变得平滑和可行所需的更改。

AS3代码如下：

import flash.events.MouseEvent;
import flash.events.Event;

var moveSpeed: Number = 5;
var sizeScale: Number = 0.04;
var clickMore: Boolean = false;
var clickLess: Boolean = false;
var clickLeft: Boolean = false;
var clickRight: Boolean = false;
var clickUp: Boolean = false;
var clickDown: Boolean = false;
var clickCenter: Boolean = false;

// ---单击“缩放更多”：

btMore.addEventListener(MouseEvent.MOUSE_DOWN, moreZoom);
function moreZoom(event: MouseEvent): void {
 clickMore = true;
}
btMore.addEventListener(MouseEvent.MOUSE_UP, stopMoreZoom);
function stopMoreZoom(event: MouseEvent): void {
 clickMore = false;
}

// ---单击“缩小”：

btLess.addEventListener(MouseEvent.MOUSE_DOWN, lessZoom);
function lessZoom(event: MouseEvent): void {
 clickLess = true;
}
btLess.addEventListener(MouseEvent.MOUSE_UP, stopLessZoom);
function stopLessZoom(event: MouseEvent): void {
 clickLess = false;
}

// ---单击向左移动：

btLeft.addEventListener(MouseEvent.MOUSE_DOWN, leftMove);
function leftMove(event: MouseEvent): void {
 clickLeft = true;
}
btLeft.addEventListener(MouseEvent.MOUSE_UP, stopLeftMove);
function stopLeftMove(event: MouseEvent): void {
 clickLeft = false;
}

// ---单击向右移动：

btRight.addEventListener(MouseEvent.MOUSE_DOWN, rightMove);
function rightMove(event: MouseEvent): void {
 clickRight = true;
}
btRight.addEventListener(MouseEvent.MOUSE_UP, stopRightMove);
function stopRightMove(event: MouseEvent): void {
 clickRight = false;
}

//-单击上移：

btUp.addEventListener(MouseEvent.MOUSE_DOWN, upMove);
function upMove(event: MouseEvent): void {
 clickUp = true;
}
btUp.addEventListener(MouseEvent.MOUSE_UP, stopUpMove);
function stopUpMove(event: MouseEvent): void {
 clickUp = false;
}

//-单击向下移动：

btDown.addEventListener(MouseEvent.MOUSE_DOWN, downMove);
function downMove(event: MouseEvent): void {
 clickDown = true;
}
btDown.addEventListener(MouseEvent.MOUSE_UP, stopDownMove);
function stopDownMove(event: MouseEvent): void {
 clickDown = false;
}

//-单击移动中心：

btCenter.addEventListener(MouseEvent.MOUSE_DOWN, centerMove);
function centerMove(event: MouseEvent): void {
 clickCenter = true;
}
btCenter.addEventListener(MouseEvent.MOUSE_UP, stopCenterMove);
function stopCenterMove(event: MouseEvent): void {
 clickCenter = false;
}

//-单击缩放轮：

stage.addEventListener(MouseEvent.MOUSE_WHEEL, handleMouseWheel);
function handleMouseWheel(event: MouseEvent): void {
 if (myMCimg.scaleX >= 1) {
 myMCimg.scaleX += (event.delta * sizeScale);
 myMCimg.scaleY += (event.delta * sizeScale);
 } else {
 myMCimg.scaleX = 1;
 myMCimg.scaleY = 1;
 }
}

// ---操作：

addEventListener(Event.ENTER_FRAME, enterFrame);
function enterFrame(event: Event): void {
 if (clickMore == true) {
 myMCimg.scaleX += sizeScale;
 myMCimg.scaleY += sizeScale;
 }
 if ((clickLess == true) && (myMCimg.scaleX >= 1)) {
 myMCimg.scaleX -= sizeScale;
 myMCimg.scaleY -= sizeScale;
 }
 if (clickLeft == true) {
 myMCimg.x -= moveSpeed;
 }
 if (clickRight == true) {
 myMCimg.x += moveSpeed;
 }
 if (clickUp == true) {
 myMCimg.y -= moveSpeed;
 }
 if (clickDown == true) {
 myMCimg.y += moveSpeed;
 }
 if (clickCenter == true) {

//-集中化：

 myMCimg.scaleX = 1;
 myMCimg.scaleY = 1;
 myMCimg.x = stage.stageWidth / 2;
 myMCimg.y = stage.stageHeight / 2;
 }
}

//-单击按键方向键盘：

stage.addEventListener(KeyboardEvent.KEY_DOWN, pressKeys);
function pressKeys(event: KeyboardEvent): void {

 if (event.keyCode == Keyboard.LEFT) {
 myMCimg.x -= moveSpeed;
 }
 if (event.keyCode == Keyboard.RIGHT) {
 myMCimg.x += moveSpeed;
 }
 if (event.keyCode == Keyboard.UP) {
 myMCimg.y -= moveSpeed;
 }
 if (event.keyCode == Keyboard.DOWN) {
 myMCimg.y += moveSpeed;
 }
 if (event.keyCode == Keyboard.ENTER) {

//-集中化：

 myMCimg.scaleX = 1;
 myMCimg.scaleY = 1;
 myMCimg.x = stage.stageWidth / 2;
 myMCimg.y = stage.stageHeight / 2;
 }

//-单击拖动：

 myMCimg.addEventListener(MouseEvent.MOUSE_DOWN, dragMove);
 function dragMove(event: MouseEvent): void {
 myMCimg.startDrag();
}
 myMCimg.addEventListener(MouseEvent.MOUSE_UP, stopDragMove);
 function stopDragMove(event: MouseEvent): void {
 stopDrag();
} 
}

Answer 1

（1）集中化：

要按宽度（水平）居中，请尝试也将图片的半角宽度减去：

myMCimg.x = (stage.stageWidth / 2) - (myMCimg.width / 2);

用高度（垂直）集中的逻辑相同。

（2）缩放：

至于平滑缩放，我尚未测试您的代码，因此不确定“不平滑” 的视觉问题到底是什么意思。也许这是您的输出设置？如果您尝试使用以下3个硬件加速选项，则发布设置（按Ctrl+Shift+F12）中的“流畅度” 会得到改善：无，直接和GPU？

最后，我只能建议您尝试以下类似方法（也许有帮助）：

要测试代码...

在舞台上创建2个不同的颜色框。
将每个框转换为MovieClip（而不是Button）。
为每个框指定一个 instance 名称（例如：zoom_in和zoom_out）。
将图像添加/转换为某些具有 instance 名称pic的MovieClip。

第一个示例将通过鼠标悬停来更新缩放...

zoom_in.addEventListener(MouseEvent.MOUSE_OVER, process_zoom_rollover);
zoom_in.addEventListener(MouseEvent.MOUSE_OUT, process_zoom_rollout);

zoom_out.addEventListener(MouseEvent.MOUSE_OVER, process_zoom_rollover);
zoom_out.addEventListener(MouseEvent.MOUSE_OUT, process_zoom_rollout);

//# mouse pointer is placed over either zoom-in or zoom-out icon..
function process_zoom_rollover (event: MouseEvent): void 
{ 
    //trace("event.currentTarget : " + event.currentTarget.name );
    event.currentTarget.addEventListener(Event.ENTER_FRAME, animate_Zoom);
}

//# mouse pointer is now move away from over any zoom icon.
function process_zoom_rollout (event: MouseEvent): void 
{ 
    event.currentTarget.removeEventListener(Event.ENTER_FRAME, animate_Zoom);
}

function animate_Zoom (event:MouseEvent) : void 
{
    //# scale by PERCENTAGE (width or height / 100), then multiply by some SPEED amount
    if (event.currentTarget.name == "zoom_in") //increase width and height
    { pic.width += ((pic.width /100 ) * 1.75); pic.height += ((pic.height /100 ) * 1.75);  }

    if (event.currentTarget.name == "zoom_out") //decrease width and height
    { pic.width -= ((pic.width /100 ) * 1.75); pic.height -= ((pic.height /100 ) * 1.75);  }
}

第二个示例将通过单击鼠标来更新缩放...

zoom_in.addEventListener(MouseEvent.CLICK, process_zoom_click);
zoom_out.addEventListener(MouseEvent.CLICK, process_zoom_click);

//# mouse pointer is placed over either zoom-in or zoom-out icon.
function process_zoom_click (event:MouseEvent) : void 
{ 
    //trace("event.currentTarget : " + event.currentTarget.name );
    if (event.currentTarget.name == "zoom_in") //increase width and height
    { pic.width += ((pic.width /100 ) * 1.75); pic.height += ((pic.height /100 ) * 1.75);  }

    if (event.currentTarget.name == "zoom_out") //decrease width and height
    { pic.width -= ((pic.width /100 ) * 1.75); pic.height -= ((pic.height /100 ) * 1.75);  }
}

如何在as3中平滑图像的“缩放”和“平移”

1 个答案: