什麼是捏與縮放手勢與Ionic3和Hammer.JS？

我需要能夠捏和縮放字體大小，在Android和iOS上。（不僅僅是我在谷歌搜索時看到的衆多例子中的常規圖片）。有人可以告訴我，如果在Ionic 3中使用這種簡單的方法嗎？什麼是捏與縮放手勢與Ionic3和Hammer.JS？

Documentation，推測你可以使用（捏）。但是這從來沒有開箱即用。
我知道Ionic使用Hammer.JS在封面下...每this source。
Ionic Forums建議您可以使用@ViewChild的組合並手動添加listen和on處理程序來啓用它。

然後出於某種原因，事件從未在帶有觸摸板的Macbook Pro上觸發，但是當我將其上傳到Ionic View事件時，我會嘗試縮放以進行縮放。我想知道是否有一些導航代理選擇不能啓用Macbook Pro上的功能，因爲觸摸板應該有助於實現這一點？

更新：也許你需要touch emulator script在Macbook Pro上完成任務。我也讀here

iOS上的Safari沒有窗口，滾動條或調整大小按鈕....用戶通過輕彈手指來平移。用戶通過雙擊和縮小開啓來放大，然後縮小桌面上不可用於Safari的縮小關閉手勢。由於用戶與網頁內容交互的方式不同，桌面和iOS上的視口不一樣。

所以，也許這可能是爲什麼錘不上的本機MacBook Pro的工作..

當在離子頁面上搜索手勢也得到這個page（觸覺/ Taptic - 這它推斷是iOS的依賴）。

我還認爲可能存在與index.html中的viewport配置方式的連接。但是，這似乎是一個沒有得到一個乾淨的解決方案per this thread兔子洞，並再次這似乎是iPhone的具體情況。

我也看到了：

Gestures - Patterns on Material.io

This blog post上捏在Android變焦。

在JSON.stringify上使用事件警報 - 你可以通過捏合來獲得這些類型的屬性，使用與論壇類似的來源放大iPhone。我通過查看iPhone警報來手動輸入。可能會有奇數的錯字..我省略了很多實際值...

人們是否傾向於使用RxJS反彈與捏事件來限制您放大/縮小的速率？

{"pointers": [{},{}], 
    "changedPointers": [{}], 
    "pointerType": "touch", 
    "srcEvent":{"isTrusted":true}, 
    "isFirst":false, 
    "isFinal":false, 
    "eventType":2 
    "center":{"x":158, "y":302} 
    "timeStamp": 
    "deltaTime": 
    "angle": 
    "distance": 
    "deltaX":, 
    "deltaY":, 
    "offsetDirection":, 
    "overallVelocityX":, 
    "overallVelocityY":, 
    "overallVelocity":, 
    "scale":, 
    "rotation":, 
    "maxPointers":, 
    "velocity":, 
    "direction":, 
    "target":, 
}

我也想有一個"additionalEvent"屬性，就可以方便檢測「尖滅」與「pinchin」 ......我似乎雙火。

雖然這種方法似乎罰款在iPhone上（除了多個事件觸發）...我測試的Android三星Galaxy S4手機似乎往往不是反轉，並拋出許多事件。我也隨後在一位擁有最新瀏覽器的同事三星Galaxy S8上進行測試。我想我可能需要打包一個最新的瀏覽器。但我認爲這也不會解決它。沒有詳盡的測試，它看起來像Android第一次給出了正確的答案，然後它倒轉了東西。所以我想知道是否每個手指的座標都以某種方式被緩存，所以後續的捏入和放出請求都是基於陳舊的數據。是否有HammerJS重置配置設置？

我知道這些其他庫太（不必要的jQuery太）的：

InteractJS同樣，他們的罐頭捏縮放例如未能就工作的MacBook Pro的觸控板。

Jester

腳註：捏的最好的實現縮放我所看到的，在Android和iOS的工作原理是this版本由邁克爾·伊澤。但是從代碼分析來看，它似乎基於HammerJS 0.5的早期實現，甚至不會使用捏作爲領域語言的一部分 - 就像drag，transform，tap，double_tap一樣，所以它必須促進這些東西通過較低層次的抽象。不幸的是，這是爲圖像。

來源

2017-10-10 JGFMK

如果您嘗試縮放除您正在嘗試執行的任何其他操作之外的其他字體大小， – Webruster

作出反應捏縮放事件，以'n'分配計算出的類名 - 作爲一個數字並將其分配給文本字段。即1級，2級，3級等1,2,3 = n - 可能有一些規模從1到5說。問題是HammerJS捏事件在Android內置於Ionic3中的版本中不穩定。 – JGFMK

從你的長篇大論地解釋了一下搜索此之後的輸入可能會適合您的需要，但它需要增強對您的版本，也有一些它的部件需要進行調整：

基本上有在

有3個文件需要
~/src/pages/home/home.ts 
~/src/pages/home/home.scss 
~/src/pages/home/home.html 
home.html的

<div #zoom class="zoom">元素是您需要將事件附加到其中的固定容器，它的子項是要放大的項目。

home.scss

.zoom填充容器的大小，具有固定位置，並且重要touch-action: none其中HammerJS需求。

家。TS

它需要的內容弄清楚實際大小，而不頁腳和頭湊了過來，將for loop只是增加了等於 viewport的user sees minus the actual size of the content#zoom.原來大小的每個孩子的absolute height，由於我們覆蓋了滾動，所以將會看到最有可能溢出底部和右邊的內容（因爲它的固定和可以是任何大小）將通過平移完成，因此我們必須知道它的溢出量有多大。

要平移的最大尺寸是原始的溢出尺寸，現在先放大，然後縮放等於1。基地是要記住我們在擠壓縮放時離開的位置。

我們開始時聽個別*，panend & pancancel的以及pinchend & pinchcancel分別稱爲取決於時機當您鬆開手指這樣既必須加，稱他們各自onEnd功能。

setCoor功能

設置x & y座標確保它不走過去，它是最大

變換函數

動作「翻譯」，並縮放#zoom元素，xx & yy爲重置位置

onPinchend功能

設定的基礎上，並設置刻度

onPinch功能

的極限設定取決於規模它離開的地方。

完整的代碼可以從Here得到，他已經完成了大部分的工作，如果你需要任何其他的功能添加你可以加強它。

注意：說明和代碼取自Github，如果它對你有幫助，請儘量給予該作者的信任。

來源

2017-10-17 17:30:11 Webruster

這很奇怪......因爲我已經閱讀了相同的文字，用於類似於移動應用程序的形式，該應用程序具有帶縮放的郵政包的圖像以放大縮小。但是這個實現非常業餘......當我編寫這個程序時，我的iPhone正在安裝一個ios更新..將回發鏈接到應用程序。但這不是我接受的答案，因爲它沒有那麼完美。我將不得不看一看，稍後再看看它們有多相似。 – JGFMK

@JGFMK我肯定會同意這可能不是你的答案。爲了提供一個解決方案，我們需要在SO中使用MVCE，所以從某個地方開始我選擇了這個。當你正在研究這個回購（至少我猜測）時，我們將會有一個MVCE，我們可以工作和修改它與集體的想法，至少我會給我最好的嘗試，因爲它的價值嘗試獲得這樣的好和有趣的問題的解決方案 – Webruster

這是同一個應用程序.. – JGFMK

什麼是捏與縮放手勢與Ionic3和Hammer.JS？

回答

相關問題