使用 HTML/CSS/Javascript 绘制基本形状
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5252751/
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
Drawing basic shapes with HTML/CSS/Javascript
提问by ShawnCBerg
I need to design a web app that allows visitors to draw and label basic shapes. The visitors will be drawing a basic map of a store. The shapes drawn will need to be stored in a database (their coordinates and sizes) along with their labels and a few options so they can be easily replicated later in a different app.
我需要设计一个允许访问者绘制和标记基本形状的网络应用程序。参观者将绘制商店的基本地图。绘制的形状需要与它们的标签和一些选项一起存储在数据库中（它们的坐标和大小），以便以后可以在不同的应用程序中轻松复制。
What's the easiest way to accomplish this on a web page?!
在网页上完成此操作的最简单方法是什么？！
回答by thirtydot
If I was doing this, I'd use Rapha?l.
如果我这样做，我会使用Rapha?l。
Check out the demos on the above link, it can do all sorts of crazy.
查看上面链接上的演示，它可以做各种疯狂的事情。
If you're after an actual code sample, I'll have a go using Rapha?l if you like.
如果您想要一个实际的代码示例，如果您愿意，我会尝试使用 Rapha?l。
It works in many browsers:
它适用于许多浏览器：
Rapha?l currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.
Rapha?l 目前支持 Firefox 3.0+、Safari 3.0+、Chrome 5.0+、Opera 9.5+ 和 Internet Explorer 6.0+。
回答by Ben
Take a look at http://zwibbler.com
回答by Hussein
You can draw some cool shapes using pure CSS.
您可以使用纯 CSS 绘制一些很酷的形状。
Check working example at http://jsfiddle.net/yFn6z/1/
在http://jsfiddle.net/yFn6z/1/检查工作示例
Also more way to draw CSS shapes with borders
http://www.vanseodesign.com/css/creating-shapes-with-css-borders/
http://www.sendesignz.com/index.php/css/68-how-to-draw-speech-bubble-and-shapes-with-css3
http://net.tutsplus.com/articles/news/fun-with-css-shapes/
还有更多绘制带边框的 CSS 形状的方法
http://www.vanseodesign.com/css/creating-shapes-with-css-borders/
http://www.sendesignz.com/index.php/css/68-how -to-draw-speech-bubble-and-shapes-with-css3
http://net.tutsplus.com/articles/news/fun-with-css-shapes/
If you want to draw vector shapes of all kinds use Rapha?l javascript library.
如果您想绘制各种矢量形状，请使用Rapha?l javascript 库。
回答by Ashwin Krishnamurthy
If its lines and circles, You can use Bresenham's algorithm (Read up more in google, a 1x1px div with the color of your choice represents each point of a line or circle) once the algorithm has been implemented, you can use setAttribute to assign whatever attributes you want to to each line or circle that the user draws and store all the data by separating each shape with some proper delimiters and store it as a text file using FSO. The stored text file can be used as a means to save the users progress.. etc.
如果它是直线和圆，你可以使用 Bresenham 的算法（在谷歌中阅读更多内容，一个 1x1px div 和你选择的颜色代表一条线或圆的每个点）一旦算法被实现，你可以使用 setAttribute 来分配任何通过使用一些适当的分隔符分隔每个形状并使用 FSO 将其存储为文本文件，您想要为用户绘制的每条线或圆添加属性并存储所有数据。存储的文本文件可以用作保存用户进度的一种手段......等。
