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属性。

使用jQuery旋转一行

1 个答案: