Apache flex Flex：在形状之间绘制连接线

我正在使用AdobeFlex3构建一个图表工具。我即将实施连接器线路，我有一个问题

假设我在画布上的任意位置有两个正方形。我需要在它们之间画一条带箭头的连接线。我需要它倾向于目标广场的中心，但在其边界结束。

我如何找出要画线的确切点

---

谢谢

最简单的事情可能是使用

flash.geom.Point

。取两个中心

c1

和

c2

。取向量

d

，这是它们的区别。根据其角度（315到45、45到135、135到225、225到315），您将知道涉及哪些边（分别为：右侧和左侧、顶部和底部、左侧和右侧、底部和顶部）

然后计算每一侧与连接中心的线之间的交点

---

连接中心的线可以表示为

p=t*v+c1

（以矢量表示）。将边表示为一条线，然后计算

t

，使两个方程产生相同的点

p

，这是您正在寻找的交点。

下面是一个示例，可以执行您想要的操作

package
{
    import flash.display.Shape;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.geom.Matrix;
    import flash.geom.Point;
    import flash.ui.Mouse;

    /**
     * Sample class to draw squares and arrows between them.
     */
    public class SquareArrows extends Sprite
    {
        /**
         * Initialize the scene as soon as we can.
         */
        public function SquareArrows()
        {
            if(stage) {
                init();
            }
            else {
                addEventListener(Event.ADDED_TO_STAGE, init);
            }
        }

        /**
         * Draw two squares and an arrow between them.
         */
        private function init(e : Event = null) : void
        {
            if(hasEventListener(Event.ADDED_TO_STAGE)) {
                removeEventListener(Event.ADDED_TO_STAGE, init);
            }

            // Drawing random-sized squares.
            var squareOne : Shape =
                    getSquareShape((Math.random() * 50) + 20, 0xBBBBBB);
            var squareTwo : Shape =
                    getSquareShape((Math.random() * 50) + 20, 0xDDDDDD);
            addChild(squareOne);
            addChild(squareTwo);

            // Draw the connector.
            var connector : Shape = getConnectorShape(squareOne, squareTwo);
            addChild(connector);
        }

        /**
         * Draw a connector arrow between two square shapes.
         */
        private function getConnectorShape(connectFrom : Shape, connectTo : Shape) : Shape
        {
            // Getting the center of the first square.
            var centerFrom : Point = new Point();
            centerFrom.x = connectFrom.x + (connectFrom.width / 2);
            centerFrom.y = connectFrom.y + (connectFrom.height / 2);

            // Getting the center of the second square.
            var centerTo : Point = new Point();
            centerTo.x = connectTo.x + (connectTo.width / 2);
            centerTo.y = connectTo.y + (connectTo.height / 2);

            // Getting the angle between those two.
            var angleTo : Number =
                Math.atan2(centerTo.x - centerFrom.x, centerTo.y - centerFrom.y);
            var angleFrom : Number =
                Math.atan2(centerFrom.x - centerTo.x, centerFrom.y - centerTo.y);

            // Getting the points on both borders.
            var pointFrom : Point = getSquareBorderPointAtAngle(connectFrom, angleTo);
            var pointTo : Point = getSquareBorderPointAtAngle(connectTo, angleFrom);

            // Calculating arrow edges.
            var arrowSlope : Number = 30;
            var arrowHeadLength : Number = 10;
            var vector : Point =
                new Point(-(pointTo.x - pointFrom.x), -(pointTo.y - pointFrom.y));

            // First edge of the head...
            var edgeOneMatrix : Matrix = new Matrix();
            edgeOneMatrix.rotate(arrowSlope * Math.PI / 180);
            var edgeOneVector : Point = edgeOneMatrix.transformPoint(vector);
            edgeOneVector.normalize(arrowHeadLength);
            var edgeOne : Point = new Point();
            edgeOne.x = pointTo.x + edgeOneVector.x;
            edgeOne.y = pointTo.y + edgeOneVector.y;

            // And second edge of the head.
            var edgeTwoMatrix : Matrix = new Matrix();
            edgeTwoMatrix.rotate((0 - arrowSlope) * Math.PI / 180);
            var edgeTwoVector : Point = edgeTwoMatrix.transformPoint(vector);
            edgeTwoVector.normalize(arrowHeadLength);
            var edgeTwo : Point = new Point();
            edgeTwo.x = pointTo.x + edgeTwoVector.x;
            edgeTwo.y = pointTo.y + edgeTwoVector.y;

            // Drawing the arrow.
            var arrow : Shape = new Shape();
            with(arrow.graphics) {
                lineStyle(2);
                // Drawing the line.
                moveTo(pointFrom.x, pointFrom.y);
                lineTo(pointTo.x, pointTo.y);

                // Drawing the arrow head.
                lineTo(edgeOne.x, edgeOne.y);
                moveTo(pointTo.x, pointTo.y);
                lineTo(edgeTwo.x, edgeTwo.y);
            }
            return arrow;
        }

        /**
         * Utility method to get a point on a square border at a certain angle.
         */
        private function getSquareBorderPointAtAngle(square : Shape, angle : Number) : Point
        {
            // Calculating rays of inner and outer circles.
            var minRay : Number = Math.SQRT2 * square.width / 2;
            var maxRay : Number = square.width / 2;

            // Calculating the weight of each rays depending on the angle.
            var rayAtAngle : Number = ((maxRay - minRay) * Math.abs(Math.cos(angle * 2))) + minRay;

            // We have our point.
            var point : Point = new Point();
            point.x = rayAtAngle * Math.sin(angle) + square.x + (square.width / 2);
            point.y = rayAtAngle * Math.cos(angle) + square.y + (square.height / 2);
            return point;
        }

        /**
         * Utility method to draw a square of a given size in a new shape.
         */
        private function getSquareShape(edgeSize : Number, fillColor : Number) : Shape
        {
            // Draw the square.
            var square : Shape = new Shape();
            with(square.graphics) {
                lineStyle(1);
                beginFill(fillColor);
                drawRect(0, 0, edgeSize, edgeSize);
                endFill();
            }

            // Set a random position.
            square.x = Math.random() * (stage.stageWidth - square.width);
            square.y = Math.random() * (stage.stageHeight - square.height);

            return square;
        }
    }
}

这段代码没有完全优化。这个想法更多的是解释它是如何工作的。基本上，我们定义两个（随机）正方形，并在它们之间画一条线。为了追踪直线，我们计算从第一个正方形的中心到第二个正方形的中心的角度，并使用特殊方法（

getSquareBorderPointAtAngle

）在正方形边框上沿正确方向提取一个点

此方法是此代码段的第一个关键点。我们使用简单的圆几何来计算，并对如何使点与边界匹配进行了一些复杂化，而不是在正方形周围或内部匹配圆

然后，我们画一个箭头。为此，我们使用Flash

Matrix

类，因为这种方法比从头开始计算要容易得多

---

现在我们完成了。

一个月前我在这里读答案，因为我需要同样的东西。同时发现了这个连接器绘图示例，并认为我应该共享该链接

该示例在uicomponents之间绘制连接线，并在拖动连接线时更新这些线。不错

（来源：）

---

这太棒了，伙计，谢谢你！我现在有点心烦意乱，所以我还没有试过，但我会的。多谢各位much@Glorfindel编辑一个有10年历史的ActionScript答案，这是奉献，不是真的，它只是一个机器人：）哇，我刚刚看到GitHub的Gist链接，非常有趣。干得好