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

Question

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

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

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

Answer 1

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

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

9. 现在是时间码，打开主时间轴上的代码编辑器，粘贴以下内容（解释见代码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 片缩放不是你的菜（不是我的菜），那么只需多做一点工作：

1. 将您的箭杆和箭头分开制作。分别给他们实例名称head 和shaft。创建箭头，使其指向右侧。

2. 同时选择它们，并将它们嵌套到一个影片剪辑中 (F8)。为该新容器影片剪辑指定一个实例名称arrow，并确保它的锚点位于中间轴的最左侧（箭头点的另一端）。

3. 使用以下代码：

   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);
   }