jQuery를 사용하여 A 라인을 회전하십시오.

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> 

내 라인은 아래 그림과 같습니다

내가 그것을 두 개의 엔드 포인트의에서 핸들러를 바꾸어 선을 회전합니다. 마우스가 회선의 두 끝점을 누를 때마다 사용자는 마우스를 원 운동으로 움직이면 선을 회전시킬 수 있습니다.

가 어떻게 그렇게 할거야 오전 :

나는 아래 이미지처럼 뭔가 싶어?

Answer 1

거리, 오프셋 상/좌 및 회전 각도를 계산하고 CSS로 div에 적용하는 한 가지 방법이 있습니다.

드래그 엔드 포인트 선에 대한 간단한 클래스 :

/** 
* @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 속성에 따라 다릅니다.