Javascript 旋转多边形检测并使线跟随边界

这是一个我已经挣扎了很长时间的问题

正如您所看到的，这是实际工作的问题的当前状态。我用工具在两个div之间拖动一条线，如果我移动源div或目标div，箭头将跟随矩形边界。 为此，我计算直线（由代表每个div中心的两个点定义）与矩形边界之间的交点。然后，通过获得目标div中心与其边界之间的距离来减少直线。到目前为止还不错

这里是棘手的部分： 我最近实现了这样旋转矩形的功能

还有两个问题：

• 当您将一条线从矩形（未旋转）拖动到旋转的矩形时，它仍然遵循边界，就像它没有旋转一样
• 将一条线从旋转的矩形拖动到另一个矩形时，它不会附着到另一个矩形的边界

所以我的问题是：如何使这些箭头跟随旋转的矩形。更棘手的是，如何绘制一个旋转矩形到另一个旋转矩形的箭头。 我在可以使用的技术方面受到限制：HTML5、CSS3、JQuery（Javascript） 不能使用HTML5画布

我有矩形的旋转角度，因为我自己设置了它

下面是我计算交点、假设（箭头宽度）和直线旋转角度的代码：

     var link = $(target).find(".arrow");
    if ($(link).length) {
        $.each(link, function (index, value) {
/* zoomLevel is just a scaling of the container, it corrects position but here, you can just ignore it */
            var x1 = $(target).offset().left + ($(target).width() / 2) * zoomLevel;
            var y1 = $(target).offset().top + ($(target).height() / 2) * zoomLevel;
            var to = $(value).attr("data-bind");
            var destinationStuff = $("body").find("#" + to);
            var destinationW = ($(destinationStuff).width() / 2) * zoomLevel;
            var destinationH = ($(destinationStuff).height() / 2) * zoomLevel;
            var x2 = $(destinationStuff).offset().left + destinationW;
            var y2 = $(destinationStuff).offset().top + destinationH;
            var hypotenuse = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
            var angle = Math.atan2((y1 - y2), (x1 - x2)) * (180 / Math.PI);
            angle += 180;
            var a = (y2 - y1) / (x2 - x1);
            var minushyp = 0;
            if (-destinationH <= a * destinationW && a * destinationW <= destinationH) {
                if (x1 > x2) {
                    //intersect with left side target

                        interX = Math.abs(a * destinationW);
                        minushyp = Math.sqrt((destinationW) * (destinationW) + (interX) * (interX));


                } else {
                    //intersect with right side target
                    interX = Math.abs(a * destinationW);
                    minushyp = Math.sqrt((destinationW) * (destinationW) + (interX) * (interX));
                }
            } else if (-destinationW <= destinationH / a && destinationH / a <= destinationW) {
                if (y1 > y2) {
                    //intersect with bottom side target
                    interX = Math.abs(destinationH / a);
                    minushyp = Math.sqrt((destinationH) * (destinationH) + (interX) * (interX));

                } else {
                    //intersect with top side target
                    interX = Math.abs(destinationH / a);

                    minushyp = Math.sqrt((destinationH) * (destinationH) + (interX) * (interX));

                }
            }

            animateBind(value, target, hypotenuse, minushyp, angle, false);

        });
    }

var link=$（目标）.find（“.arrow”）；
如果（$（链接）.length）{
$.each（链接、函数（索引、值）{
/*zoomLevel只是容器的缩放，它修正了位置，但在这里，您可以忽略它*/
var x1=$（目标）.offset（）.left+（$（目标）.width（）/2）*zoomLevel；
变量y1=$（目标）.offset（）.top+（$（目标）.height（）/2）*zoomLevel；
var to=$（value）.attr（“数据绑定”）；
var destinationstaff=$（“body”）.find（#“+to）；
var destinationW=（$（destinationStuff）.width（）/2）*zoomLevel；
var destinationH=（$（destinationStuff）.height（）/2）*zoomLevel；
变量x2=$（destinationStuff）.offset（）.left+destinationW；
变量y2=$（destinationStuff）.offset（）.top+destinationH；
变量斜边=数学sqrt（（x1-x2）*（x1-x2）+（y1-y2）*（y1-y2））；
变量角度=数学atan2（（y1-y2），（x1-x2））*（180/数学PI）；
角度+=180；
变量a=（y2-y1）/（x2-x1）；
var minus Hyp=0；
如果（-destinationH在div边界处剪裁直线的一种方法是将直线变换为div的局部坐标系

假设行由
x1，y1，x2，y2定义，并且
x2，y2
需要剪裁

因此，首先，将场景移动
（-divcenterx，-divcentery）
。然后，div的中心将位于原点：

x1 -= divcenterx
y1 -= divcentery
x2 -= divcenterx
y1 -= divcentery

然后，我们需要使用矩阵
R
还原旋转：

R11 = cos(angle)
R12 = sin(angle)
R21 = -sin(angle)
R22 = cos(angle)

x1Unrotated = R11 * x1 + R12 * y1
y1Unrotated = R21 * x1 + R22 * y1
x2Unrotated = R11 * x2 + R12 * y2
y2Unrotated = R21 * x2 + R22 * y2

现在，我们可以像您已经做的那样执行剪辑。要剪辑的矩形位于原点的中心，具有原始宽度和高度

之后，我们必须撤消转换

x1 = R11 * x1Unrotated + R21 * y1Unrotated + divcenterx
y1 = R12 * x1Unrotated + R22 * y1Unrotated + divcentery
x2 = R11 * x2Unrotated + R21 * y2Unrotated + divcenterx
y2 = R12 * x2Unrotated + R22 * y2Unrotated + divcentery

这是线条的最终坐标。
似乎有道理。我会尝试一下，然后回来告诉你，因为我无法移动场景，所以没有工作。将其视为一块板，可以在上面粘贴标签并将其绑定在一起。唯一的想法是移动div，但在我绑定它们时不会移动（事件管理）你实际上不必移动场景。这只是旋转矩形的辅助构造。上面描述的算法应该足够了。
x1 = R11 * x1Unrotated + R21 * y1Unrotated + divcenterx
y1 = R12 * x1Unrotated + R22 * y1Unrotated + divcentery
x2 = R11 * x2Unrotated + R21 * y2Unrotated + divcenterx
y2 = R12 * x2Unrotated + R22 * y2Unrotated + divcentery