ここに私がかなり長い間苦労してきた問題があります。
ご覧のとおり、これは実際に機能する問題の現在の状態です。ツールを使用して 2 つの div 間の線をドラッグすると、ソース div または宛先 div を移動すると、矢印が四角形の境界に従います。そのために、線 (各 div の中心を表す 2 つの点で定義) と四角形の境界との交点を計算します。次に、目的の div の中心とその中心との間の距離を取得して線を減らします。バウンド。ここまでは順調ですね。
トリッキーな部分は次のとおりです。最近、これらの長方形を次のように回転させる機能を実装しました
そして、次の 2 つの問題があります。
- 四角形 (回転していない) から回転した四角形に線をドラッグすると、回転していないかのように境界をたどります。
- 回転した四角形から別の四角形に線をドラッグすると、他の四角形の境界にくっつかない
私の質問は次のとおりです。これらの矢印を回転した長方形に追従させるにはどうすればよいですか。回転した長方形の矢印を別の回転した長方形に描く方法は、よりトリッキーです。使用できるテクノロジーが制限されています: 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>
すべての考えはボードに絶対に配置されています ありがとう !