拉伸并旋转Movieclip而不会失真

Question

我正在构建一个Flash桌面应用程序，用户需要使用一行（或任何可以完成工作）在舞台（计算机和路由器）上链接两个Movieclip，我想达到同样的效果： image1。我搜索并找到了这个solution，我尝试了代码并进行了一些修改：

main {
  flex-shrink: 0;
}

footer{
  height: 50px; // or %
  margin-top: auto;
}

当我编译代码时，我得到了这个：image2，所以你可能会说，我发现的问题是：

1 - 线的边缘遵循鼠标的方向，但有时它会超出光标，我希望光标拖动线的边缘。

2 - 线条改变了它的宽度，如果它的线宽是如此显着的90度，我希望线条具有恒定的宽度。

如何实现image1中显示的相同精确效果？

Answer 1

// First, lets create mouse-transparent container for drawing.
var DrawingLayer:Shape = new Shape;
addChild(DrawingLayer);

// Hook the event for starting.
stage.addEventListener(MouseEvent.MOUSE_DOWN, onDown);

// Define a storage for keeping the initial coordinates.
var mouseOrigin:Point = new Point;

function onDown(e:MouseEvent):void
{
    // Save the initial coordinates.
    mouseOrigin.x = DrawingLayer.mouseX;
    mouseOrigin.y = DrawingLayer.mouseY;

    // Hook the events for drawing and finishing.
    stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
    stage.addEventListener(MouseEvent.MOUSE_MOVE, onDraw);
}

function onDraw(e:MouseEvent):void
{
    // Remove the previous line.
    DrawingLayer.graphics.clear();

    // Draw a new line.
    DrawingLayer.graphics.lineStyle(5, 0xFF6600);
    DrawingLayer.graphics.moveTo(mouseOrigin.x, mouseOrigin.y);
    DrawingLayer.graphics.lineTo(DrawingLayer.mouseX, DrawingLayer.mouseY);
}

function onUp(e:MouseEvent):void
{
    // Unhook the events for drawing and finishing.
    stage.removeEventListener(MouseEvent.MOUSE_UP, onUp);
    stage.removeEventListener(MouseEvent.MOUSE_MOVE, onDraw);
}

Answer 2

这是因为动作脚本试图通过改变其容器MovieClip的比例来拉伸线条粗细。但您可以通过将“线缩放”选项设置为“无”来防止这种情况。

为此，选择您的行并打开属性菜单，然后从“缩放”选项的下拉菜单中选择“无”。

但是， 我建议你用代码画一条线：Draw line from object to Mouse (AS3)

写下面的代码：

this.graphic.clear ();
this.graphic.lineStyle(0x000000);
this.moveTo(startPoint.x,startPoint.y);
this.lineTo(endpoint.X,endpoint.y);