我可以使用jQuery绘制一条线吗？
我有一个网络应用程序，我希望用户以下列方式绘制一条线：当他点击Point1并移动鼠标时，将Point1中的线条绘制到当前鼠标位置 ，当点击Point2时绘制最终从Point1到Point2的行 。
我怎么能用jQuery和/或其中一个插件来做呢？
接受挑战。
我尝试用CSS转换和Javascript中的一堆数学做到这一点 – 半小时后，我有这个：
在灰色方块中单击2次，然后绘制一条线。 当角度> 45度时，仍然存在一个小错误。 也许其他人知道如何解决这个问题。 也许不使用Math.asin（arcsinus），而是使用其他三角函数，但我真的不擅长它。 我以为即使有一个小错误也会发布它，我认为这对你来说是一个好的开始。
我本周末尝试了许多不同的方法，最适合我的解决方案来自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 = $('') .appendTo('#page') .addClass('line') .css({ 'position': 'absolute', 'transform': transform }) .width(length) .offset({left: x1, top: y1}); return line; } 你不能用jQuery和经典HTML做到这一点。
-
您可以使用SVG（+ svgweb for IE8- http://code.google.com/p/svgweb/ ）来动态创建SVG。 jQuery + svgweb工作正常，你只需要知道如何创建SVG节点，你只需要jquerify这个节点。 在大多数情况下使用jquerifi后只使用一种方法
attr() -
你可以使用Raphael http://raphaeljs.com/ （基于SVG和VML）来做到这一点
-
你可以使用Canvas（ http://flashcanvas.net/ for IE8-）来做到这一点
对于SVG编程将是这样的：
-
创建第一个点的时刻：您创建空行
var Line（此点坐标也将是x1和y1） -
然后绑定
mousemove重绘了Line的x2，y2属性 -
在
mousedown后的mousedown，你冻结了最后一行的位置。
UPDATE
您可以使用CSS / JS来完成，但主要问题在于IE8的计算，它只有用于转换的Matrixfilter。
已经使用了一段时间的修改版本了。 效果很好。
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要求所以我忽略了它。 我可以很容易地从原来的function改编。