JavaScript绘制动态线条

Question

JavaScript绘制动态线条

8

我正在寻找用于让用户在图像上画线的Javascript代码。就像Photoshop中的线条工具一样：用户点击图像，拖动鼠标（当开始点和鼠标点之间的线条在鼠标拖动时动态绘制）。我还需要一个可调用的函数来发送页面的起始和结束坐标。我已经找到了这个非常好的区域选择脚本：http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/，并且我已经找到了许多绘制线条（以及其他形状）的JS脚本，但找不到我要找的内容。谢谢。

- Ranch

问题是...那条线的目的是什么？你想将它画在图像本身上吗？还是你只想要一个DIV“线”元素覆盖在图像上面？ - Roko C. Buljan

问题是...那条线的目的是什么？你想把它画在图像本身上吗？还是只想在图像上叠加一个DIV line元素？ - undefined

7个回答

3

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

它使用SVG作为前3个浏览器的渲染方式，而对于IE则使用VML，但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");

我曾在拖动时使用它来画线，可以保证其易用性。

- plodder

2

这里提供了一个跨浏览器的JavaScript绘制线条的解决方案，无需任何外部库：http://bytes.com/topic/javascript/answers/88771-drawing-vector-lines-javascript。在所有浏览器上都可以使用，包括IE浏览器。

- Benubird

我正在寻找纯JS代码，这在IE9和Firefox8中运行得非常好（已经测试过了，其他浏览器也可能支持）。当你复制他们的代码时，你需要进行一些字符串格式化，并将线条颜色从#FFFFFF更改为#FF0000（因为背景是白色！）。 - Mario Awad

1

我正在做类似的事情。在画布上绘制一条线非常简单。你可以从我的代码中参考。

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

只需跟随mousedown监听器。

虽然我发现，在想要加载图像时，raphael库可能更好用。我之所以这样说是因为Canvas似乎像一个平面图像。因此，如果我想向其中添加一个图像，然后允许用户操作该图像，它不会让我这样做（除非有什么我错过的东西）。

Raphael允许您绘制并仍将那些绘画和图像用作对象。

- pfunc

1

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

- Eli Bendersky

请注意，canvas是相对较新的技术，因此只有最近的浏览器才支持它，即使现在IE也不支持：http://en.wikipedia.org/wiki/Canvas_element#Support - T.J. Crowder

1

如果你的数学足够好，对于大多数现代浏览器，可以使用以下其中一个方法（根据情况）而不需要使用 Canvas 标签：

例如，创建一个高为 1 像素的 div，使用 border-top 来作为“线”，并使用鼠标拖动事件来定位和旋转它。

这样做有点“疯狂”，但是这将是一个非常有趣的练习。（你应该使用一些像 Raphael JS 这样的跨浏览器和合理的工具 - 请参阅上文）

- adamnfish

0

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

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

- user1164035

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- The Who · Accepted Answer

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

我推荐使用Raphael JS。