用Hammer.js縮放SVG

我正在編寫一個使用SVG顯示信息的跨平臺Web應用程序。我需要有一個多點觸控界面來平移和縮放SVG圖形。從我的研究中看來，Hammer.js是我最好的方法，而且我正在使用jQuery庫版本。用Hammer.js縮放SVG

我能夠平移和使用SVG的視框中財產縮放圖像。我遇到的問題是在縮放過程中使用中心點信息（與左上角的縮放比較）。那個中心點，無論在我的形象中，都應該停留在捏的中心。顯然，解決方案是修改viewBox的前兩部分，但我無法確定正確的值。中心點（event.gesture.center）似乎在瀏覽器頁面座標中，所以我需要弄清楚如何可靠地縮放這個，然後計算viewBox的x和y座標。我查找了一些例子，但找不到任何相關的東西。

是否使用viewBox屬性來縮放SVG圖像的最佳方式？有更好的選擇嗎？有沒有人有縮放壓縮中心的SVG圖像的示例代碼？

另外，我也注意到，即使我綁定的事件處理到SVG元素，捏合手勢，似乎從頁面上的任何地方工作。它不是默認瀏覽器處理捏，因爲它只是使用我的代碼縮放SVG圖像。這裏是我用來綁定捏事件的代碼：

$(window.demoData.svgElement).hammer().on("pinch", function (event) { 
    event.preventDefault(); 
    ... 
});

感謝您對這兩個問題的任何幫助。

來源

2013-08-16 JSwartzen

我知道這並不能回答你的問題，所以把它作爲一個評論，但我已經有很多的好運氣與jQuery PanZoom做類似的事情，你問什麼。 https://github.com/timmywil/jquery.panzoom。你可能想嘗試一下。 – JasCav

非常感謝您的評論。我已經確定了我的問題的答案，並計劃寫出來併發布。我現在懷疑你提到的圖書館長遠來說可能對我更好。他們的演示在我的手機上運行良好，但我需要在平板電腦上將其與我的其他解決方案進行比較，以瞭解哪種方法最適合。正如你所說，它看起來完全符合我的要求（在約束元素內縮放和平移SVG）。 – JSwartzen

最好的方法是使用SVG變換，以轉換和調整您可以執行集中在你捏變焦的組合。你只需要找出公式。這個例子可以幫助你（它使用css變換，但你有這個想法）：https://github.com/EightMedia/hammer.js/blob/1.0.x/examples/pinchzoom.html

來源

2014-02-27 10:57:46 madmed

您的鏈接已損壞。 – jnbdz

他們刪除了示例文件夾，我修復了鏈接。 – madmed

我很高興有人一直在尋找解決這些問題。看來SVG還沒有得到足夠的重視。

我一直在尋找和工作幾個月的解決方案。首先，您有三種移動SVG的選項。

使用視框如你所說。這是我認爲如果您想將圖像作爲單個項目處理的最佳解決方案。
您可以使用SVG元素的CSS變換。缺點是這會導致像素化，但意味着您可以使用其他類型元素存在的解決方案
您可以在SVG內的元素或元素組上使用svg變換。

要回答代碼問題，可以如下描述居中捏合。首先，您需要使用屏幕CTM（座標變換矩陣）將夾點事件中心點從屏幕座標轉換爲SVG座標。如果點具有座標（X，Y），那麼你的起源視框需要經歷一個相當的改造

翻譯（-x，-y）
規模（比例因子）
平移（x， y）

我已經使這項工作'主要'在一個庫中，我稱之爲hammerhead，它運行在hammerjs之上。這裏有一個example它在action.I不會給你的代碼來準確地解決你的問題，因爲有太多的代碼去你已經把'...'我最終編寫了一個viewBox對象來操縱。這裏僅供參考是我用來操縱它的代碼。

scale: function(scale, center){ 
    var boxScale = 1.0/scale; 
    center = center || this.center(); 
    var newMinimal = this.getMinimal().subtract(center).multiply(boxScale).add(center); 
    var newMaximal = this.getMaximal().subtract(center).multiply(boxScale).add(center); 
    var newViewBox = viewBox(newMinimal, newMaximal, this.getValidator()); 
    return newViewBox.valid()? newViewBox : null; 
}

這種方法並非沒有問題。更改viewBox的計算密集程度非常高我不會在手機上創造令人愉快的滾動體驗，除非圖像的元素很少。如果您爲了響應某個操作而更改視圖，它將很好地工作。例如左右鍵向上。我已經探索了一些其他的選擇我在這些回購

正如我提到試圖相當一段時間如上所述。這些都是單獨使用其中一種方法。爲了獲得平滑的滾動和沒有像素化，我認爲將需要兩者的組合。我正在爲另一個圖書館工作。

來源

2014-06-28 08:45:21

關於你一直在研究的新的lib的任何消息？ – Rayjax

不幸的是它已經被放在了後面。這是我得到的最遠的https://github.com/CrowdHailer/Hammerhead2 –

還有另一個專門爲此任務設計的庫，名爲PanZoom。不幸的是，它與Hammer的表現並不一致。我用它來放大/縮小SVG文件，並取得了巨大的成功。

https://github.com/timmywil/jquery.panzoom

來源

2016-01-21 14:52:28 raider33

用Hammer.js縮放SVG

回答

相關問題