Drehen Sie eine Zeile mit jQuery

Question

Ich habe div mit einer Breite von 1px und Höhe von 241px erstellt. Es ist Hintergrundfarbe ist schwarz, so dass es wie eine Linie aussehen kann.

<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> 

Meine Linie sieht aus wie das Bild unten:

Ich möchte einen Handler, die Linie drehen, indem sie in ihm zwei Endpunkten ist. Jedes Mal, wenn die Maus die beiden Endpunkte der Linie drückt, kann der Benutzer die Linie drehen, wenn er die Maus in einer kreisförmigen Bewegung bewegt.

Ich möchte so etwas wie das Bild unten:

Wie soll ich das jetzt tun?

Answer 1

Ein Weg besteht darin, den Abstand, den Versatz oben/links und den Drehwinkel zu berechnen und auf das div mit CSS anzuwenden.

Eine einfache Klasse für Linien mit ziehbar Endpunkte:

/** 
* @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)" 
    }); 
} 

Details: https://jsfiddle.net/DerekL/ryp3dtak/

Dies nutzt jQuery und jQuery UI einige der harten Arbeit zu vereinfachen. Dies hängt auch von der Eigenschaft transform in CSS3 ab.