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

Question

我有一个网络应用程序,我希望用户以下列方式绘制一条线:当他点击Point1并移动鼠标时,将Point1中的线条绘制到当前鼠标位置,当点击Point2时绘制最终线从点1至点2.

我怎么能用jQuery和/或其中一个插件来做呢？

Answer 1

接受挑战.

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

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

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

Answer 2

使用 jQuery 和经典 HTML 无法做到这一点。

1. 您可以使用 SVG（+svgweb for IE8 - http://code.google.com/p/svgweb/）来实现 SVG 可以动态创建。jQuery + svgweb 工作得很好，你只需要知道如何创建 SVG 节点，并且只需要 jquerify 这个节点。大多数情况下jquerifiing后只使用一种方法attr()

2. 您可以使用 Raphael http://raphaeljs.com/来完成（基于 SVG 和 VML）

3. 您可以使用 Canvas 来完成此操作（对于 IE8- 为http://flashcanvas.net/）

对于 SVG 编程将是这样的：

1. 创建第一个点的时刻：您创建空线var Line（该点的坐标也将是x1和y1）

2. 然后绑定Line 的属性的mousemove重绘x2y2

3. 冻结最后一行位置mousedown后打开。mousemove

更新

您可以使用 CSS/JS 来完成此操作，但主要问题是 IE8- 的计算，它只有用于转换的矩阵过滤器。