在 HTML 页面上绘制/绘制矢量图形的最佳方法有哪些?

发布于 2024-08-18 07:19:29 字数 894 浏览 6 评论 0原文

我正在尝试使用线条和文本生成一些动态网页背景。

看看我的演示 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

内心旳酸楚 2024-08-25 07:19:29

早上,

我很高兴使用 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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文