Question

这是我一直在苦苦挣扎一段时间的问题。

enter image description here

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

这是棘手的部分：我最近实现了旋转那些矩形的能力

enter image description here

有两个问题：

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

所以我的问题是：如何使这些箭头跟随旋转的矩形。如何将旋转的矩形箭头绘制成另一个旋转的矩形。我可以使用的技术受到限制：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);

        });
    }

我有一个功能可以做同样的想法，但当你拖动一个目标矩形（所以每个箭头绑定到它也移动）

和一些HTML

<div class="board">
            <div class="stuffSet object" id="box5" data-rotation="20"
             style="top: somepx; left: somepx; -webkit-transform-origin:0% 0%; -webkit-transform:rotate(some degrees)">
<div class="stuffSet object" id="box4" style="top: 220px; left: 702px;">
            <div class="subStuff arrow object" data-bind="box5">
                <div class="line top left" style="border-width: 1px; right: 0px;"></div>
                <div class="line top right" style="border-width: 1px; right: 0px;"></div>
                <div class="line center" style="border-width: 1px;"></div>
            </div>
        </div>
</div>

每一个想法都绝对定位于董事会谢谢！

Answer 1

在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

这是该行的最终坐标。

旋转多边形检测并使线条遵循边界

1 个答案: