2024-01-01
Pinch 捏放手势
Pinch
缩放: 100.0%
(0.0,0.0)
点击下方选择图片进行预览, 要不然就只能预览我这段文字了
对齐 iOS 相册缩放体验
鼠标拖拽 / 鼠标滚轮
单指拖拽 / 多指捏放
placeholder

# 说明 ↵

我这个实现逼近 iOS 相册的那种极致缩放体验，支持双指缩放，而且双指过程中可以抬起一根手指然后再放上去，怎么搞都不会挂的那种
具体实现打开 devtools 看吧，主要步骤是：
  1. 1.
    多触点管理, 核心是
    e.changedTouches
    和
    e.touches
    以及
    Touch.identifier
  2. 2.
    手势状态的向量化
  3. 3.
    在移动端 touch 事件组的基础上兼容支持 pc 的鼠标和滚轮
  4. 4.
    将向量化的手势状态转成变换矩阵，应用到 css matrix 上
  5. 5.
    将用户选择的本地图片读取成 blob url 并用 backage-image 显示它