actionscript 3 通过拖动拉伸和旋转动画剪辑箭头

Posted 2023-02-16

【中文标题】actionscript 3 通过拖动拉伸和旋转动画剪辑箭头

【英文标题】：actionscript 3 stretching and rotating a movieclip arrow with drag

【发布时间】：2018-05-08 02:05:29

【问题描述】：

我对动作脚本很陌生，现在有点卡住了。 我正在尝试制作一个固定在一端的箭头，但尖端应该可以通过鼠标拖动来拖动，从而拉伸和旋转箭头。 如果我可以在拖动时保持箭头的三角形尖端不改变大小，那也很棒。 我考虑制作一个由尖端和线条分别组成的电影剪辑，线条完成所有“拉伸”，而尖端则简单地跟随。我只是不确定如何。

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

有人知道如何实现这一点吗？

【问题讨论】：

您需要使用en.wikipedia.org/wiki/Pythagorean_theorem 计算鼠标与箭头(0,0) 之间的距离，然后缩放箭头轴并定位箭头。

【参考方案1】：

这是执行此操作的一种方法（我认为最简单的方法）。

在 Adob​​e Animate 中，导入或绘制箭头。 将您的位图或形状转换为影片剪辑（修改 -> 转换为符号） 在出现的对话框中，选中“为 9 切片缩放启用参考线”，然后点击确定。 现在，双击您的新影片剪辑进行编辑。你会看到有线条（指南）。垂直缩放时，只有中间 3 行的区域会拉伸/缩放。 移动引导线直到它们与屏幕截图相匹配（只有您要拉伸的箭头部分位于中间），另外，为方便起见，将其对齐，以便 + （锚点） 位于箭头底部的确切位置。 现在，由于 9 切片缩放不能很好地配合旋转，我们将把这个箭头影片剪辑嵌套到一个容器 MovieClip 中。回到主时间线。为您的箭头影片剪辑指定一个实例名称arrowInner。 选择/聚焦arrowInner，按 F8（或修改 -> 转换为符号）将该对象包装在另一个影片剪辑中 - 在对话框中点击确定（不要检查任何选项)。 给这个新的影片剪辑实例名称arrowOuter。双击它进行编辑，并对齐arrowInner，使锚点位于箭头的底部（与您之前在arrowInner 中所做的相同）。

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

//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。创建箭头，使其指向右侧。

同时选择它们，并将它们嵌套到一个影片剪辑中 (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);
 

【讨论】：

这节课真是太棒了！

我同意 Organis 的观点。我尝试了第二个选项，因为我更了解它的工作原理，而且它对我来说非常有效。