2

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

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

有谁知道如何实现这一点？

4

1 回答 1

2

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

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

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

    //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);
}
于 2017-11-24T16:41:56.387 回答