介绍
touch-position 是一个可以获取手势操作位置信息的 npm 包，支持多点触控。它可以方便地在移动端 web 应用中使用，并且支持常见的手势操作，如拖拽、缩放等。
在本文中，我们将学习如何使用 touch-position 来实现一些实际应用场景。
安装
首先，我们需要安装 touch-position。可以通过 npm 命令行工具进行安装：
npm install touch-position
基本使用
使用 touch-position 可以很方便地获取手势操作的位置信息。下面是一个简单的例子，演示如何在屏幕上显示手指操作的坐标：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------ -------- ------------ ------- ----------- - --------- --------- ---- -- ----- -- ----------------- ------- -- -- ----- ------ ----- -------- ----- - -------- ------- ------ ---- ---------------------- ------- -------------------------------------------------------------------------------------------- -------- --- --------- - -------------------------------------- --- -- - --- ----------------------------- -------------- ------------- - ------------------- - ------ ------- -- -- - ----- - -- - - ----- - ---- --- ------------- ------------- - ------------------- - ------ ----- -- -- - ----- - -- - - ----- - ---- --- ------------ ------------- - ------------------- - ------ ----- -- -- - ----- - -- - - ----- - ---- --- --------- ------- -------展开代码
上述代码中，我们首先在页面中创建了一个 div 元素，用来显示手指操作的坐标。接着，我们使用 touch-position 创建了一个实例，并监听了 start、move 和 end 三个事件。每次事件触发时，我们都会更新 touch-info 的内容。
进阶使用
除了获取基本的手势操作位置信息之外，touch-position 还支持更复杂的手势操作，例如缩放和旋转等。下面是一个例子，演示如何使用 touch-position 实现图片缩放和旋转：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------ ------------ ------------ ------- -------------- - --------- --------- ------ ----- ------- ------ --------- ------- - ------ - --------- --------- ---- -- ----- -- ------ ----- ------- ----- ----------- -------- ----------------- ------ ------- ----------- --------- ---- --------- - -------- ------- ------ ---- ------------------- ---- ---------- ------------------ ------ ------- -------------------------------------------------------------------------------------------- -------- --- ----- - --------------------------------- --- -- - --- ----------------------------- -- ----------- --- ------------ - -- --- --------------- - -- -------------- ------------- - -- ------ ------------ - ------------------ --------------- - --------------------- --- ------------- ------------- - -- ------------- --- ----- - ------------ - --------- --- -------- - --------------- - ------------- ------------------------ ---------- --- -------- ----------------- - -- -- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------展开代码
