在 HTML 页面上绘制/绘制矢量图形的最佳方法有哪些?
我正在尝试使用线条和文本生成一些动态网页背景。
看看我的演示 http://74er.net/labs/lines.html (只需关注黄线)。
这是一种蹩脚且低效的方法,它通过字面意义创建一个大小为 1 X 1 、黄色背景且 X、Y 位置基于椭圆公式的 元素。
我的要求是线条创建相当简单(或者相当简单):
- 必须在客户端创建,而不是
- 可以根据简单的公式(圆形、椭圆形或直线)创建
- 由服务器脚本生成的动态图像可以包含在 DOM 元素中(例如 DIV,以便我可以将其分层作为背景)
- 没有 HTML5 画布技术(只是因为它应该在不兼容 HTML5 的浏览器上呈现)
- 不会像我当前的实现那样对浏览器造成太大负担
没有需要:
- 真正平滑的曲线(尽管这会受到欢迎)
- 点/虚线(如果可行的话我也会喜欢)
基于上述,我几乎可以肯定 SVG(使用 Raphaël) 是可行的方法,但由于某些浏览器缺乏原生 SVG 支持,我感到犹豫。
我查看了 Walter Zorns 库,它构建了一些出色的性能调整算法-在。因此,如果我找不到更有创意的实现,这将是我的选择。
如果您需要进一步说明,请告诉我。
I'm trying out some dynamic web page background generation using lines and text.
Take a look at my demo at http://74er.net/labs/lines.html (just focus on the yellow line).
It's a lame and inefficient method by literally creating a <span>
element with 1 X 1 size and a yellow background with the X,Y position based on an ellispe formula.
My requirements is for the line creation are fairly simple (or rather straightforward):
- must be created at client-side and not a dynamic image generated by server scripts
- can be created based on a simple formula (circle, ellispe or just a straight line)
- can be contained in a DOM element (e.g. DIV so that I can layer it as a background)
- No HTML5 canvas technique (simply because it should be rendered on non-HTML5 compliant browsers)
- Not too taxing on the browser like my current implementation
There's not need for:
- really smooth curves (though that will be welcomed)
- dotted/dashed (I'll like that as well if feasible)
Based on the above, I am almost certain SVG (with Raphaël) is the way to go BUT I am put off by lack of native SVG support in some browsers.
I have looked at Walter Zorns library, and it is has some excellent performance tuning algorithms built-in. So it'll be my choice if I can't find a more creative implementation.
Let me know if you need further clarification.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
早上,
我很高兴使用 Dojo Toolkit 中的绘图功能。您可以在这里看到它的实际效果:
Dojo 绘图示例
要下载 Dojo,请访问:
Dojo 工具包
Morning,
i have enjoyed to work with the drawing features from the Dojo Toolkit. You can see it in action here:
Dojo drawing example
To Download Dojo visit:
Dojo Toolkit