pinch-type 是一個針對行動裝置端文字閱讀體驗的 Canvas 型文字渲染解決方案，核心創新在於修正長期以來行動端「pinch-to-zoom」的設計缺陷——使用者想放大文字，但系統卻放大整個頁面。

核心問題與解決方案

行動網頁的 pinch-to-zoom 功能一直存在設計不當的問題：當使用者捏放手勢意圖是放大文字以提升可讀性，標準瀏覽器行為卻是縮放整個頁面，導致排版破亂、需要來回滾動。pinch-type 截獲 pinch-to-zoom 手勢，改為直接改變文字大小而非頁面尺度，解決了這個多年懸而未決的問題。整個實作僅需兩行程式碼，建立在 @chenglou/pretext 的基礎之上。

三種互動模式

該套件提供三個獨立的函式，對應不同的使用場景：

• Pinch Type — 統一的文字渲染搭配 pinch-to-zoom 縮放，所有文字同步調整大小
• Scroll Morph — 魚眼效果，視埠中心的文字大且明亮，邊緣文字小且昏暗，無 pinch-zoom
• Combined (Pinch Morph) — 兩種效果合併，既支援魚眼互動又支援 pinch-to-zoom 手勢

技術架構與配置靈活性

三個函式均以 Canvas 為底層，透過 @chenglou/pretext 進行精確的文字測量與換行，確保正確的分段感知換行處理。每一幀都將文字行繪製到 Canvas 上。對於 Scroll Morph，字體大小和不透明度基於與視埠中心的距離使用 cubic ease-out 插值計算。Touch 事件驅動動量滾動，friction 可配置。

各函式均提供豐富的選項配置：

• Pinch Type 支援字體大小範圍（預設 8–60px）、行高、邊距、背景色、滾動摩擦力，並提供 onZoom 回呼以追蹤縮放事件
• Scroll Morph 允許設定視埠中心與邊緣的字體大小（分別預設 26px 和 11px）、漸變半徑（預設 300px）、行高等參數
• Pinch Morph 整合兩者配置，同時支援 onZoom 回呼

API 設計與實例方法

使用者透過簡單的 npm 套件安裝後，匯入對應函式並傳入容器元素與文本內容即可啟用。套件要求容器具有明確的寬高尺寸（如 100vw × 100vh），各函式內部自動建立全螢幕 Canvas。

所有實例均支援統一的方法介面：

• setText() — 更新文字內容並重新排版
• resize() — 強制重新排版（視窗調整時自動呼叫）
• destroy() — 清理 Canvas、事件監聽器與動畫迴圈
• canvas 屬性 — 存取底層 Canvas 元素

實作細節與效能考量

文字渲染全數委由 Canvas 完成，避免了 DOM 層級的文字縮放對排版的干擾。pinch 手勢與滾動均採用 momentum-based 設計，提供自然的移動感受。魚眼效果透過動態插值實現，中心區域文字清晰突出，邊緣逐漸淡化，強化了閱讀焦點。