javascript - 我可以使用 JavaScript 矢量艺术进行 1000% 缩放吗?

标签 javascript canvas zooming vector-graphics

我打算委托(delegate)开发人员帮助我创建一个简单的数学艺术作品。我想知道是否可以使用 JavaScript 矢量艺术来完成以下内容,如果不能,您会推荐什么方法。

图像将从一些形成形状的相交线开始。这本质上是放大 1000% 或更多的图像,用户可以滚动缩小直到整个图像适合屏幕宽度。

当然,这种尺寸的实际图像会很大,所以我认为以编程方式绘制它会更好,这也可能使线条粗细在您缩小时按比例放大一点,以便它们“一直缩小时,您几乎看不见。一直放大时,图像看起来不会像素化,但通过一些“技巧”(如换出图像)也可以实现这一点。

例子: Zoomed in Zoomed out

基本上与 zoom.it 相反,但规模要大得多。 http://zoom.it/

我看过的一些库是: 纸.js 织物.js 传单.js 拉斐尔.js

如何实现像这样的极端缩小?

最佳答案

您绝对是在正确的轨道上。我认为您想要的东西在网络上使用 HTML5 是很有可能的。你是对的,最简单/最好的实现是使用矢量图形。您可以使用图像分块,但是分块的预处理和带宽要求会很快变大。

以下是我在使用您列出的一些库时的一些想法:

  • Leaflet.js - Leaflet 支持绘制 SVG 元素以及图像平铺(如果您想采用那种方法)。 Leaflet 也是“移动优先”的,因为它支持双指缩放和双击缩小框等功能。开箱即用也支持滚动缩放。使用 Leaflet 启动和运行非常简单。据我所知,Leaflet 正在将 SVG 写入 DOM;这是需要牢记的。

  • Raphael - Raphael 能够满足您的需求,但您可能需要自己实现缩放方面。这绝对是可以做到的,应该不会太难,但要记住一些事情。 Raphael 将 SVG 元素写入 DOM;如果您有很多 SVG 元素,这可能会有点不守规矩。但是,您可以优化它并在缩放时创建/销毁元素。

  • Paper 和 Fabric - 这些似乎都将 SVG 渲染到 Canvas(不同于将 SVG 写入 DOM)。它们看起来都非常强大,而且似乎有很好的缩放 API。您可能仍然需要连接滚动/触摸手势才能按照您想要的方式进行缩放。它们都应该表现得很好,因为它们使用的是较低级别的 API,这应该会绕过您在 DOM 中执行此操作时可能遇到的许多问题。

关于javascript - 我可以使用 JavaScript 矢量艺术进行 1000% 缩放吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24064849/

相关文章:

javascript - 如何使用 jquery 突出显示基于文本的表格列?

javascript - 如何根据在rails简单表单中选中的单选按钮渲染输入表单

javascript - Kinetic.js 获取具有颜色变化的形状命中区域

javascript - html5 Canvas 使用图像作为 mask

html - 为什么在我添加视口(viewport)元标记时 PhoneGap 不会以不同方式呈现我的页面?

javascript - 浏览器的实时服务器更新

javascript - Nivo slider 有 JavaScript 错误

javascript - 尝试通过 Canvas 绘制图像时出现异常

iphone - 如何使 map View 缩放到当前位置的 5 英里半径

Emacs:如何在不同的窗口上以不同的缩放级别显示同一个文件?