actionscript 3 拉伸和旋转带有拖动的动画剪辑箭头

Question

我对 actionscript 很陌生，现在有点卡住了。我正在尝试制作一个固定在一端的箭头，但尖端应该可以通过鼠标拖动来拖动，从而拉伸和旋转箭头。如果我可以在拖动箭头时防止箭头的三角形尖端改变大小，那就太好了。我想过制作一个分别由提示和线条组成的动画片段，线条完成所有 "stretching"，而提示则简单地跟随。我只是不确定如何。

我发现的大多数关于鼠标拖动的文档都是关于移动完整元素，而不仅仅是移动一个部分，同时保持与其余部分的连接。我确实找到了一些关于用鼠标拖动旋转箭头的东西 here，但它对我的问题只有部分帮助，因为它没有说明同时使箭头变大。

有人知道如何实现吗？

Answer 1

这是一种方法（我认为是最简单的方法）。

在 Adobe Animate 中，导入或绘制箭头。
将您的位图或形状转换为影片剪辑（修改 -> 转换为符号）
在出现的对话框中，勾选"Enable guides for 9 slice scaling"，然后点击确定。
现在，双击您的新 MovieClip 进行编辑。你会看到有线条（指南）。垂直缩放时，只有中间3行的区域会stretch/scale。
移动引导线直到它们与屏幕截图匹配（只有您要拉伸的箭头部分在中间），另外，为了方便，将其排成一行 + （锚点） 位于箭头底部的确切位置。
现在，由于 9 切片缩放不适合旋转，我们要将此箭头影片剪辑嵌套到容器 MovieClip 中。回到主时间线。为您的箭头影片剪辑指定一个 实例名称 arrowInner。
使用 arrowInner selected/focused，按 F8（或 修改 -> 转换为符号 ）将该对象包装在另一个 MovieClip 中 - 在对话框中按确定框（不要勾选任何选项）。
为这个新的 MovieClip 指定实例名称 arrowOuter。双击它进行编辑，然后对齐 arrowInner，使锚点位于箭头的底部（与之前在 arrowInner 中所做的相同）。

现在是时间码，打开主时间线上的代码编辑器，粘贴以下内容（解释见代码注释）

//we want a function to fun every frame tick of the applicaiton
this.addEventListener(Event.ENTER_FRAME, enterFrame);

//create some helper vars that are used in the enterFrame handler
//arrowPoint is just the point of the base of the outer arrow
var arrowPoint:Point = new Point(arrowOuter.x,arrowOuter.y);

//this will store the current mouse point
var mousePoint:Point = new Point();

//this will store the radian rotation of the arrow needed to point it at the mouse
var radians:Number;

function enterFrame(e:Event):void {
    //set the global mouse point
    mousePoint.x = stage.mouseX;
    mousePoint.y = stage.mouseY;

    //calculate the distance between the two points (mouse and arrow base).
    //set the height of the inner arrow to that distance
    arrowOuter.arrowInner.height = Point.distance(arrowPoint, mousePoint);

    //get the angle needed for the arrow to point at the mouse.
    radians = Math.atan2(stage.mouseY - arrowOuter.y, stage.mouseX - arrowOuter.x);

    //convert the radians to degrees,  add 90 to compensate for the starting position of the arrow
    arrowOuter.rotation = 90 + (radians * (180/ Math.PI));
}

如果 9 切片缩放不是你的事（不是我的事），那么它只是多了一点工作：

将箭杆和箭头分开制作。分别给它们实例名称 head 和 shaft。创建箭头，使其指向右侧。
Select 两者，并将它们嵌套到 MovieClip (F8) 中。为该新容器影片剪辑指定实例名称 arrow，并确保其锚点位于中间轴的最左侧部分（箭头点的另一端）。

使用以下代码：

this.addEventListener(Event.ENTER_FRAME, enterFrame);

var arrowPoint:Point = new Point(arrow.x, arrow.y);
var mousePoint:Point = new Point();
var radians:Number;
var distance:Number;

function enterFrame(e:Event):void {
    mousePoint.x = stage.mouseX;
    mousePoint.y = stage.mouseY;

    distance = Point.distance(arrowPoint, mousePoint);

    //stretch the shaft to the full distance less the size of the arrow head
    arrow.shaft.width = distance - arrow.head.width;
    //move the arrow head to the end of the shaft
    arrow.head.x = arrow.shaft.width;

    radians = Math.atan2(stage.mouseY - arrow.y, stage.mouseX - arrow.x);
    arrow.rotation = radians * (180/ Math.PI);
}

actionscript 3 拉伸和旋转带有拖动的动画剪辑箭头

actionscript 3 stretching and rotating a movieclip arrow with drag

actionscript-3

flash

drag

adobe-animate