Javascript Javascript绘制动态线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2509689/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript draw dynamic line
提问by Ranch
I'm looking for Javascript code for letting the user draw a line (on an image).
我正在寻找用于让用户（在图像上）画线的 Javascript 代码。
Just as the line tool in Photoshop (for example):
就像 Photoshop 中的线条工具（例如）：
The user clicks on the image, drags the mouse (while the line between the start point and the mouse point is dynamically drawn on mouse drag).
用户点击图像，拖动鼠标（而起点和鼠标点之间的线是在鼠标拖动时动态绘制的）。
I would also need a callable function to send the page the start and end coordinates.
我还需要一个可调用的函数来向页面发送开始和结束坐标。
I've found this very nice script for area selection: http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/
我发现这个用于区域选择的非常好的脚本：http: //www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/
and I've found many script for drawing lines (and other shapes in JS), but could not find what I'm looking for.
我找到了许多用于绘制线条（以及 JS 中的其他形状）的脚本，但找不到我要找的东西。
Thanks
谢谢
回答by The Who
Since there is no standard method of drawing, if you want to support older browsers and IE,
you will need to use a library. The library will handle the cross platform issues of drawing with SVGor Microsoft's VML
由于没有标准的绘图方法，如果您想支持旧浏览器和 IE，您将需要使用一个库。该库将处理与SVG或微软的绘图的跨平台问题VML
I recommend Raphael JS
我推荐Raphael JS
回答by plodder
raphael.js is a lightweight rendering tool for javascript (MIT licensed) which works in FF, Safari, Chrome and IE6+.
raphael.js 是一个轻量级的 javascript 渲染工具（MIT 许可），适用于 FF、Safari、Chrome 和 IE6+。
It uses SVG for the first 3 and VML for IE but the API is identical across browsers and very sweet.
它对前 3 个使用 SVG，对 IE 使用 VML，但 API 跨浏览器是相同的，而且非常漂亮。
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");
I've used it to draw a line while dragging and can vouch for its ease of use
我已经用它在拖动时画了一条线，并且可以保证它的易用性
回答by Benubird
A cross-browser solution for drawing lines in javascript, without requiring any external libraries, can be found here: http://bytes.com/topic/javascript/answers/88771-drawing-vector-lines-javascript
在 javascript 中绘制线条的跨浏览器解决方案，不需要任何外部库，可以在这里找到：http: //bytes.com/topic/javascript/answers/88771-drawing-vector-lines-javascript
This works in all browsers, including IE.
这适用于所有浏览器，包括 IE。
回答by pfunc
i'm working on something similar. Drawing a line on a canvas is pretty simple. You can take from my code here.
我正在做类似的事情。在画布上画一条线非常简单。你可以从我的代码here中获取。
http://p-func.com/html5_test/test2.html
http://p-func.com/html5_test/test2.html
Just follow the mousedown listener.
只需按照 mousedown 侦听器即可。
Although I have found, when wanting to load images, that the raphael library might be better to use. I saw this because Canvas seems to act like a flat image. So if I want to add an aimge to it, then allow the user to manipulate that image, it won't let me (unless there is something that i am missing).
虽然我发现，当想要加载图像时，使用 raphael 库可能会更好。我看到这个是因为 Canvas 似乎表现得像一个平面图像。所以如果我想给它添加一个瞄准，然后允许用户操纵那个图像，它不会让我（除非我遗漏了什么）。
Raphael allows you to draw and still use those drawings, and images, as objects.
Raphael 允许您绘制并仍然使用这些图画和图像作为对象。
回答by Eli Bendersky
Consider using the canvaselement to display the image. Then, drawing a line (or anything else) on it is trivial.
考虑使用canvas元素来显示图像。然后，在它上面画一条线（或其他任何东西）是微不足道的。
回答by adamnfish
If your maths is good enough, it is possible (although mad) to do it without the canvas tag for most modern browsers using one of (as appropriate):
如果您的数学足够好，那么对于大多数现代浏览器，可以（尽管很疯狂）使用以下其中一种（视情况而定）在没有画布标签的情况下进行计算：
By creating eg. a 1px high div, with eg. a border-top for your 'line', and using the mouse drag event to position and rotate it.
通过创建例如。一个 1px 高的 div，例如。'line' 的边框顶部，并使用鼠标拖动事件来定位和旋转它。
Madness lies this waybut it would be a quite fun exercise. (You should use something like Raphael JS, which is cross browser and sane - see above)
疯狂就是这样，但这将是一个非常有趣的练习。（你应该使用像 Raphael JS 这样的东西，它是跨浏览器和理智的 - 见上文）
回答by user1164035
When supported you can use canvas, in IE you use the filters rotate function. As here works on both:
如果支持，您可以使用画布，在 IE 中您可以使用过滤器旋转功能。因为这里适用于两者：
