我打算委托(delegate)开发人员帮助我创建一个简单的数学艺术作品。我想知道是否可以使用 JavaScript 矢量艺术来完成以下内容,如果不能,您会推荐什么方法。
图像将从一些形成形状的相交线开始。这本质上是放大 1000% 或更多的图像,用户可以滚动缩小直到整个图像适合屏幕宽度。
当然,这种尺寸的实际图像会很大,所以我认为以编程方式绘制它会更好,这也可能使线条粗细在您缩小时按比例放大一点,以便它们“一直缩小时,您几乎看不见。一直放大时,图像看起来不会像素化,但通过一些“技巧”(如换出图像)也可以实现这一点。
例子:
基本上与 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/