我可以用JavaScript矢量圖做1000％縮放嗎？

Question

我打算委託開發人員幫助我創建一個簡單的數學藝術作品。我想知道是否可以用JavaScript矢量藝術完成以下內容，如果不能，您會推薦什麼樣的方法。

圖像將從一些相交的線條開始形成一個形狀。這基本上是放大1000％或更多的圖像，用戶可以滾動縮小，直到完整圖像適合屏幕寬度。

當然，這個尺寸的實際圖像會很大，所以我認爲最好是以編程方式繪製它，這可能會使縮放時的線條粗細縮放一些，以便它們在完全放大時幾乎不可見。在縮放時，圖像看起來不像素化，但通過一些「欺騙」來實現這一點，例如交換圖像也是可以的。

實施例：

基本上zoom.it的反向，但在一個顯著規模更大。 http://zoom.it/

我已經看了一些庫是： paper.js fabric.js leaflet.js raphael.js

怎麼能這樣一個極端的縮小（ZoomOut）來完成？

Answer 1

你絕對是在正確的軌道上。我認爲你想要的是使用HTML5在網絡上很可能。你是正確的，最簡單/最好的執行這將是使用矢量圖形。您可以使用圖像切片，但是對於切片的預處理和帶寬要求會很快變大。

下面是我的一些想法從一些圖書館的工作，你所列：

• Leaflet.js - 傳單支持繪圖SVG元素以及圖像平鋪（如果你想去該方法）。單張也是「移動第一」，因爲它支持諸如縮放縮放和雙擊縮放等功能。開箱即用也支持滾動縮放。通過Leaflet獲取內容很簡單。據我所知Leaflet正在將SVG寫入DOM;這是要記住的。

• Raphael - 拉斐爾能夠滿足您的要求，但您可能需要自己實現縮放方面。這絕對是可行的，不應該太困難，但要記住。 Raphael會將SVG元素寫入DOM;如果你有很多很多的SVG元素，它會變得有點不守規矩。但是，您可能能夠在縮放時優化這一點並創建/銷燬元素。

• 紙和織物 - 這些都似乎呈現SVG到畫布（不同於寫入SVG到DOM）。這兩個看起來非常強大，並且似乎有很好的縮放API。您可能仍然需要連接滾動/觸摸手勢才能使縮放以您想要的方式工作。這兩者都應該表現得非常好，因爲它們使用的是較低級別的API，它應該繞過您在DOM中執行此操作時可能遇到的許多問題。