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

时间:2014-06-05 15:57:46

标签: javascript canvas zoom vector-graphics

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

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

当然,这个尺寸的实际图像会很大,所以我认为以编程方式绘制它会更好,这也可能使线条粗细缩小一点,这样它们就可以了当完全放大时几乎看不见。当完全放大图像时,图像看起来不像素化,但是通过一些“欺骗”来实现这一点,例如交换图像也是可以的。

实施例: Zoomed in Zoomed out

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

我看过的一些图书馆是: paper.js fabric.js leaflet.js raphael.js

如何实现这样的极端缩放?

1 个答案:

答案 0 :(得分:1)

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

以下是我与您列出的一些图书馆合作的一些想法:

  • Leaflet.js - Leaflet既支持绘制SVG元素,也支持图像平铺(如果您想采用这种方法)。 Leaflet也是“移动优先”,因为它支持缩放缩放和双击以缩小开箱即可。开箱即用也支持滚动缩放。使用Leaflet获得一些东西很简单。据我所知,Leaflet正在向DOM编写SVG;这是值得记住的事情。

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

  • 纸张和布料 - 这两者似乎都将SVG呈现给Canvas(与将SVG写入DOM不同)。这些看起来都很强大,似乎有很好的缩放API。您可能仍需要连接滚动/触摸手势以按照您想要的方式进行缩放。这两者都应该表现得非常好,因为他们使用的是较低级别的API,这可以避免在DOM中执行此操作时可能遇到的许多问题。