简体繁体 English

在 Javascript 中画一条带箭头的直线

[英]drawing a straight line with arrow in Javascript

原文 2011-05-24 08:28:01 5 2 javascript/ html/ drawing

I am working with a Javascript project and I want to draw a line with arrow and easily rotate in any direction.我正在使用 Javascript 项目，我想用箭头画一条线并轻松地向任何方向旋转。 I prefer HTML4 instead of HTML5.我更喜欢 HTML4 而不是 HTML5。

So can any one tell me the solution?那么任何人都可以告诉我解决方案吗？

what i want is in this link.... but not in HTML5 but in HTML4我想要的是这个链接....但不在 HTML5 中，而是在 HTML4 中
http://deepliquid.com/projects/blog/arrows2.html http://deepliquid.com/projects/blog/arrows2.html

2 个解决方案

If you just care about animation (and maybe keyboard control), canvas is faster.如果您只关心 animation（也许还有键盘控制），那么 canvas 会更快。 If you want dynamic interaction (eg, the ability to click on the line, arrow, etc.), then SVG is best.如果您想要动态交互（例如，能够点击线条、箭头等），那么 SVG 是最好的。 SVGWeb and ExplorerCanvas offer some compatibility with IE for both of these... SVGWeb和ExplorerCanvas为这两者提供了与 IE 的一些兼容性...

I asked almost the same and ended up using Raphael (after the first 2 version)我问的几乎一样，最后使用了 Raphael（在第一个 2 版本之后）

If instead of an arrow, a line is enough, please look at:如果不是箭头，一条线就足够了，请看：

How to draw a line between draggable and droppable?如何在可拖动和可放置之间画一条线？

demo:演示：

http://www.balexandre.com/jQuery/draganddrop/testing_DragAndDrop.htm http://www.balexandre.com/jQuery/draganddrop/testing_DragAndDrop.htm

if you really need to draw an arrow at the end, you can append the arrow object to the code, if you need help on this, let me know.如果你真的需要在最后画一个箭头，你可以 append 箭头 object 到代码，如果你需要帮助，让我知道。