我有一个web应用程序，我想用户绘制以下列方式一行：当他点击点1，他移动鼠标，画出从点1线到当前鼠标的位置 ，当点击到POINT2得出最后的从行至点1点2。
我怎样才能做到这一点使用jQuery和/或它的插件之一？
Answer 1:
接受挑战。
我试着用CSS变换和在Javascript一堆数学来做到这一点 - 一个半小时我有这后：
http://jsfiddle.net/VnDrb/2/
请点击2次进灰广场和线应绘制。 还有，吸引了行错当角度> 45度的小bug。 也许别人知道如何解决这个问题。 也许而是采用Math.asin（arcsinus），使用其他三角函数，但我真的不擅长。 我以为我会发布它甚至有一个小错误，我认为这是一个良好的开端为您服务。
Answer 2:
我已经尝试了许多不同的方法在本周末和解决方案，为我工作最好是从亚当·桑德森： 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为IE8-做http://code.google.com/p/svgweb/ ）SVG可以动态创建。 jQuery的+ svgweb完美的工作，你只需要知道如何创建SVG节点，你只需要jquerify这个节点。 在仅使用一个方法多数情况下jquerifiing后
attr()你可以用它做拉斐尔http://raphaeljs.com/ （基于SVG和VML）
你可以用帆布做（ http://flashcanvas.net/为IE8-）
对于SVG节目将是这个样子：
创建第一个点的时刻：你创建空行
var Line（也是这个点的坐标将是x1和y1）然后，你就绑定
mousemove的重绘x2，y2线的性质在
mousedown后mousemove，你冻结最后一行的位置。
UPDATE
你可以用CSS / JS做到这一点，但主要的问题是在计算中IE8-，即只具有变换矩阵过滤器。
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浏览器的要求，所以我忽略它。 我可以从原有的功能进行调整很容易地。
文章来源: Can I draw a line using jQuery?
