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/

e.g。

// 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标签的情况下使用（如适用）其中一个现代浏览器：

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

疯狂就是这样，但这将是一个非常有趣的练习。（你应该使用类似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

Javascript绘制动态线

7 个答案: