旋轉多邊形檢測，並作出界限

Question

這是我一直在努力了很長一段時間的問題。

正如你可以看到這是實際工作問題的當前狀態。我用一個工具在2個div之間拖動一條線，如果我移動源div或目標div，箭頭會跟隨矩形邊界。 爲此，我計算線（由表示每個div中心的2個點定義）與矩形邊界之間的交點。然後，通過獲取目標div中心與其約束。到現在爲止還挺好。

這裏是棘手的部分： 我最近實施了旋轉的矩形，像這樣

的能力，並有兩個問題：

• 當你從一個矩形拖出一條線（不旋轉）旋轉到一個旋轉的一個，它仍然遵循像它不旋轉的邊界
• 當您從旋轉的矩形拖動一條線到另一個，它會esn't棒其他矩形的束縛

所以我的問題是：如何使這些箭頭跟着旋轉矩形。 Trickier，如何爲一個旋轉的矩形繪製一個箭頭到另一個旋轉的矩形。 我受限於我可以使用的技術：HTML5，CSS3，JQuery（Javascript） 無法使用HTML5畫布。

我有矩形的旋轉角度，因爲我自己設置它。

這裏是我的代碼來計算交點，hypothenuse（箭頭寬度）和線的旋轉角度：

 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 

這是行的最終座標。