如何在 as3 中平滑图像的“缩放”和“平移”
Posted
技术标签:
【中文标题】如何在 as3 中平滑图像的“缩放”和“平移”【英文标题】:How to smooth 'zoom' and 'pan' of image in as3 【发布时间】:2019-01-15 07:34:08 【问题描述】:我在 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();
【问题讨论】:
【参考方案1】:(1) 集中化:
要按宽度(水平)居中,也可以尝试减去图片的半宽度,例如:
myMCimg.x = (stage.stageWidth / 2) - (myMCimg.width / 2);
按高度集中的相同逻辑(垂直)。
(2) 缩放:
至于平滑缩放,我没有测试你的代码,所以不确定视觉问题 “不平滑” 到底是什么意思。也许这是你的输出设置?如果您尝试以下 3 个硬件加速选项:无、直接和 GPU ?
最后,我只能建议您尝试以下类似的方法作为替代方案(也许会有所帮助):
要测试代码...
在舞台上创建 2 个不同的颜色框。
将每个框转换为 MovieClip(而不是按钮)。
为每个框指定一个实例名称(例如: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 中平滑图像的“缩放”和“平移”的主要内容,如果未能解决你的问题,请参考以下文章