# 策展 · X (Twitter) 🔥

> 作者：Lucas Crespo 📧 (@lucas__crespo) · 平台：X (Twitter) · 日期：2026-03-30

> 原始來源：https://x.com/lucas__crespo/status/2038312815249817653

## 中文摘要

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 設計，提供自然的移動感受。魚眼效果透過動態插值實現，中心區域文字清晰突出，邊緣逐漸淡化，強化了閱讀焦點。

## 標籤

開源專案, Web, pinch-type