Javascript绘制动态线

Question

我正在寻找允许用户绘制一条线（在图像上）的Javascript代码。

就像Photoshop中的线条工具一样（例如）：

用户单击图像，拖动鼠标（在鼠标拖动时动态绘制起点和鼠标点之间的线）。

我还需要一个可调用的函数来发送页面的开始和结束坐标。

我发现这个非常好的区域选择脚本： http ： //www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/

我发现了许多绘制线条的脚本（以及JS中的其他形状），但找不到我要找的东西。

谢谢

Answer 1

由于没有标准的绘图方法，如果要支持旧浏览器和IE，则需要使用库。 该库将处理使用SVG或Microsoft的VML绘图的跨平台问题

我推荐Raphael JS

Answer 2

raphael.js是一个用于javascript（MIT许可）的轻量级渲染工具，适用于FF，Safari，Chrome和IE6 +。

它使用SVG作为前3和VML用于IE，但API在浏览器中是相同的并且非常甜。

http://raphaeljs.com/

例如

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);

// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff"); 

我用它来拖动画线，可以保证它的易用性

Answer 3

可以在此处找到用于在javascript中绘制线条而不需要任何外部库的跨浏览器解决方案： http ： //bytes.com/topic/javascript/answers/88771-drawing-vector-lines-javascript

这适用于所有浏览器，包括IE。

Answer 4

考虑使用canvas元素来显示图像。 然后，在其上绘制一条线（或其他任何东西）是微不足道的。

Answer 5

如果你的数学足够好，可以（尽管很疯狂）在没有canvas标签的情况下使用（根据需要）使用其中一个的大多数现代浏览器：

• -webkit-transform：旋转
• -moz-transform：旋转
• -o-变换旋转
• 三叉戟矩阵滤波器

通过创建例如。 一个1px高的div，例如。 您的“线”的边框顶部，并使用鼠标拖动事件来定位和旋转它。

疯狂就是这样，但这将是一个非常有趣的运动。 （你应该使用类似Raphael JS的东西，这是跨浏览器和理智的 - 见上文）

Answer 6

我正在做类似的事情。 在画布上画一条线非常简单。 您可以从我的代码处获取。

http://p-func.com/html5_test/test2.html

只需按照mousedown监听器。

虽然我发现，当想要加载图像时，raphael库可能更好用。 我看到了这一点，因为Canvas似乎就像一个平面图像。 因此，如果我想为它添加一个目标，那么允许用户操纵该图像，它不会让我（除非有我遗漏的东西）。

Raphael允许您绘制并仍然使用这些绘图和图像作为对象。

Answer 7

支持时你可以使用canvas，在IE中使用滤镜旋转功能。 这里适用于：

http://www.gatekeeperel.co.uk/interactives/web.html