Question

我有一个网络应用程序，我希望用户以下列方式绘制一条线：当他点击 Point1 并移动鼠标时，从 Point1 <绘制线条/ strong>到当前鼠标位置，当点击 Point2 时，将最后一行从Point1绘制到Point2 。

如何使用jQuery和/或其中一个插件来实现？

Answer 1

接受了挑战。

我尝试用CSS转换和Javascript中的一堆数学来做 - 半小时后我就有了这个：

http://jsfiddle.net/VnDrb/2/

在灰色方块中单击2次，然后绘制一条线。当角度> 1时，仍然存在一个小错误，该错误会导致错误。 45度。也许其他人知道如何解决这个问题。也许不使用Math.asin（arcsinus），使用其他三角函数，但我真的不擅长它。我以为即使有一个小错误也会发布它，我认为这对你来说是一个好的开始。

Answer 2

本周末我尝试了许多不同的方法，最适合我的解决方案来自Adam Sanderson：http://monkeyandcrow.com/blog/drawing_lines_with_css3/

他的演示在这里：http://monkeyandcrow.com/samples/css_lines/

它的核心非常简单，总是很好。

div.line{
  transform-origin: 0 100%;
  height: 3px; /* Line width of 3 */
  background: #000; /* Black fill */
}


function createLine(x1,y1, x2,y2){
  var length = Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2));
  var angle  = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
  var transform = 'rotate('+angle+'deg)';

    var line = $('<div>')
      .appendTo('#page')
      .addClass('line')
      .css({
        'position': 'absolute',
        'transform': transform
      })
      .width(length)
      .offset({left: x1, top: y1});

  return line;
}

Answer 3

~~你不能用jQuery和经典HTML做到这一点。~~

你可以使用SVG（+ svgweb for IE8- http://code.google.com/p/svgweb/）来实现可以动态创建SVG。 jQuery + svgweb工作正常，你只需要知道如何创建SVG节点，你只需要jquerify这个节点。在大多数情况下，jquerifiing只使用一种方法attr()
你可以使用Raphael http://raphaeljs.com/（基于SVG和VML）
您可以使用Canvas（http://flashcanvas.net/ for IE8-）

对于SVG编程将是这样的：

创建第一个点的时刻：您创建空行var Line（此点坐标也将是x1和y1）
然后绑定mousemove重新绘制行的x2，y2属性
在mousedown之后mousemove冻结最后一行位置。

<强>更新

您可以使用CSS / JS来完成，但主要问题在于IE8的计算，它只有用于转换的Matrix过滤器。

Answer 4

暂时使用此修改版本。效果很好。

http://www.ofdream.com/code/css/xline2.php

所以在第一次点击时，放下并将对象作为占位符div，可能是一个小圆圈，然后在移动鼠标时保持重绘一条线，或者在第二次单击时绘制它，使用原始占位符作为指南。

我最近为此制作了另一个辅助函数，因为我的工具涉及移动线条：

function setLinePos(x1, y1, x2, y2, id) {
    if (x2 < x1) {
        var temp = x1;
        x1 = x2;
        x2 = temp;
        temp = y1;
        y1 = y2;
        y2 = temp;
    }
    var line = $('#line' + id);
    var length = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
    line.css('width', length + "px");
    var angle = Math.atan((y2 - y1) / (x2 - x1));
    line.css('top', y1 + 0.5 * length * Math.sin(angle) + "px");
    line.css('left', x1 - 0.5 * length * (1 - Math.cos(angle)) + "px");
    line.css('-moz-transform', "rotate(" + angle + "rad)");
    line.css('-webkit-transform', "rotate(" + angle + "rad)");
    line.css('-o-transform', "rotate(" + angle + "rad)");

 }

这是jquery版本，在这次迭代中我没有IE要求所以我忽略了它。我很容易从原来的功能改编而来。

Answer 5

班级

function getXY(evt, element) {
    var rect = element.getBoundingClientRect();
    var scrollTop = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
    var scrollLeft = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft;
    var elementLeft = rect.left + scrollLeft;
    var elementTop = rect.top + scrollTop;

    x = evt.pageX - elementLeft;
    y = evt.pageY - elementTop;
    return { x: x, y: y };
}
var LineDrawer = {
    LineHTML: `<div style="cursor: pointer;transform-origin:center; position:absolute;width:200px;height:2px; background-color:blue"></div>`,
    isDown: false,
    pStart: {},
    pCurrent :{},
    containerID: "",
    JLine: {},
    angle: 0,
    afterLineCallback: null,
    Init: function (containerID, afterLineCallback) {
        LineDrawer.containerID = containerID;
        LineDrawer.afterLineCallback = afterLineCallback;
        LineDrawer.JLine = $(LineDrawer.LineHTML).appendTo("#" + LineDrawer.containerID);
        LineDrawer.JLine.css("transform-origin", "top left");
        LineDrawer.JLine.hide();
        //LineDrawer.JLine.draggable({ containment: "#" + LineDrawer.containerID });
        $("#" + LineDrawer.containerID).mousedown(LineDrawer.LineDrawer_mousedown);
        $("#" + LineDrawer.containerID).mousemove(LineDrawer.LineDrawer_mousemove);
        $("#" + LineDrawer.containerID).mouseup(LineDrawer.LineDrawer_mouseup);
    },
    LineDrawer_mousedown: function (e) {
        if (e.target === LineDrawer.JLine[0]) return false;
        LineDrawer.isDown = true;
        let p = LineDrawer.pStart = getXY(e, e.target);
        LineDrawer.JLine.css({ "left": p.x, "top": p.y, "width": 1});
        LineDrawer.JLine.show();
    },
    LineDrawer_mousemove: function (e) {
        if (!LineDrawer.isDown) return;
        LineDrawer.pCurrent = getXY(e, document.getElementById("jim"));
        let w = Math.sqrt(((LineDrawer.pStart.x - LineDrawer.pCurrent.x) * (LineDrawer.pStart.x - LineDrawer.pCurrent.x)) + ((LineDrawer.pStart.y - LineDrawer.pCurrent.y) * (LineDrawer.pStart.y - LineDrawer.pCurrent.y)));
        LineDrawer.JLine.css("width", w - 2);
        LineDrawer.angle = Math.atan2((LineDrawer.pStart.y - LineDrawer.pCurrent.y), (LineDrawer.pStart.x - LineDrawer.pCurrent.x)) * (180.0 / Math.PI);
        //the below ensures that angle moves from 0 to -360
        if (LineDrawer.angle < 0) {
            LineDrawer.angle *= -1;
            LineDrawer.angle += 180;
        }
        else LineDrawer.angle = 180 - LineDrawer.angle;
        LineDrawer.angle *= -1;

        LineDrawer.JLine.css("transform", "rotate(" + LineDrawer.angle + "deg");

    },
    LineDrawer_mouseup: function (e) {
        LineDrawer.isDown = false;
        if (LineDrawer.afterLineCallback == null || LineDrawer.afterLineCallback == undefined) return;
        LineDrawer.afterLine(LineDrawer.angle, LineDrawer.pStart, LineDrawer.pCurrent);
    },
};

用法：

var ECApp = {
    start_action: function () {
        LineDrawer.Init("jim", ECApp.afterLine);            
    },
    afterLine(angle, pStart, pEnd) {
        //$("#angle").text("angle : " + angle);
        let disp = "angle = " + angle;
        disp += " Start = " + JSON.stringify(pStart) + " End = " + JSON.stringify(pEnd);
        //alert(disp);
        $("#angle").text("angle : " + disp);
    }
}
$(document).ready(ECApp.start_action);

HTML

<div class="row">
<div class="col">
    <div id="jim" style="position:relative;width:1200px;height:800px;background-color:lightblue;">            
    </div>
</div>

我可以使用jQuery绘制一条线吗？

5 个答案: