jQueryを使って線を回転する

Question

幅が1px、高さが241pxのdivを作成しました。背景色は黒で、線のように見えます。

<div style="background-color: black; width: 1px; height: 241px; position: absolute; left: 248.5px; top: 93.984375px; z-index: 1; display: block; background-position: initial initial; background-repeat: initial initial;" id="myid_templates_editor_line_1" class="myid_templates_editor_element myid_templates_editor_line myid_templates_editor_active myid_templates_editor_front"></div> 

マイラインは、下の画像のようになります。私はそれの2つのエンドポイント年代にハンドラを入れてラインを回転させたい

。マウスが輪の2つの端点のいずれかを押すたびに、ユーザはマウスを円運動させると線を回転させることができます。

は、どのように私はそれを行うつもり午前：

は、私は下の画像のようなものをしたいですか？

Answer 1

距離、オフセットの上/左、回転角度を計算し、CSSでdivに適用する方法の1つです。

ドラッグ可能なエンドポイントとラインのための単純なクラス：

/** 
* @class Simple class for creating a Line with draggable end points. 
*/ 
function Line(){ 
    this.start = $("<div>").appendTo("body").addClass("point").draggable({ 
     drag: this.draw.bind(this), 
     stop: this.draw.bind(this) 
    }); 
    this.end = $("<div>").appendTo("body").addClass("point").draggable({ 
     drag: this.draw.bind(this), 
     stop: this.draw.bind(this) 
    }); 
    this.line = $("<div>").appendTo("body").addClass("line"); 
} 

Line.prototype.draw = function(){ 
    // Get coordinates 
    var startCoords = this.start.position(), 
     endCoords = this.end.position(); 

    // Calculate offset, length, angle 
    var offset = [startCoords.left, startCoords.top], 
     length = Math.sqrt(Math.pow(endCoords.top - startCoords.top, 2) + 
          Math.pow(endCoords.left - startCoords.left, 2)), 
     angle = Math.atan2(endCoords.top - startCoords.top, 
          endCoords.left - startCoords.left); 

    // Set CSS 
    this.line.css({ 
     left: offset[0] + (this.start.width()/2) + "px", 
     top: offset[1] + (this.start.height()/2) + "px", 
     width: length + "px", 
     transform: "rotate(" + angle + "rad)" 
    }); 
} 

詳細：https://jsfiddle.net/DerekL/ryp3dtak/

これは、ハードワークの一部を簡素化するためのjQueryとjQuery UIを使用しています。これはCSS3のtransformプロパティにも依存します。