Поворот линии с использованием jQuery

-1

Я создал div с шириной 1px и высотой 241px. Цвет фона черный, чтобы он выглядел как линия.Поворот линии с использованием jQuery

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

Моя линия выглядит как на картинке ниже:

Я хочу, чтобы повернуть линию, поставив обработчик в его двух конечных точек. Каждый раз, когда мышь нажимает либо на две конечные точки линии, пользователь может вращать линию, если он перемещает мышь круговым движением.

Я хочу что-то как на картинке ниже:

Как я буду делать это?

источник

2016-06-21 Qerjiuthn

Повернуть? Или вы можете перетащить две точки и соединить между ними линию? –

@Derek 朕會功夫 -> Это хорошая идея. – Qerjiuthn

Вы уверены, что вам нужно использовать divs и jquery? Использование canvas или svg было бы намного проще – derp

Один из способов - рассчитать расстояние, смещение сверху/влево и угол поворота и применить к div с помощью CSS.

Простой класс для линий с перемещаемыми конечными точками:

/** 
* @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 для упрощения некоторых тяжелой работы. Это также зависит от свойства transform в CSS3.

источник

2016-06-21 03:56:24

Поворот линии с использованием jQuery

ответ

Смежные вопросы