scale-controller 是一个简单的 JavaScript 库，用于为H5网页元素添加触摸缩放功能。以下是如何在你的项目中使用这个库的详细说明。
使用以下命令安装库：
npm i scale-controller或者使用 yarn：
yarn add scale-controller在你的 JavaScript 文件中，引入 scale-controller：
import { enablePinchZoom, cancelPinchZoom, generateUniqueId } from 'scale-controller';
// 或者
import scaleControl from 'scale-controller';scale-controller 暴露了以下 API：
启用元素的触摸缩放功能。
-
params(Object): 配置参数对象，包含以下属性：-
element(String | HTMLElement): 需要添加缩放功能的 DOM 节点。 -
minScale(Float): 最小缩放值，默认为0.5。 -
maxScale(Float): 最大缩放值，默认为3。 -
button(Boolean): 是否显示还原按钮，默认为true。 -
rotate(Number): 还原按钮旋转角度，默认为0。 -
rebound(Boolean): 是否在缩放小于 1 时自动反弹回原大小，默认为false。 -
transition(Number): 缩放动画过渡时间（毫秒），默认为600。
-
scaleControl.enablePinchZoom({
element: document.getElementById('myElement'),
minScale: 0.5,
maxScale: 5,
button: true,
rotate: 45,
rebound: true,
transition: 300,
});取消元素的触摸缩放功能。
-
element(String | HTMLElement): 需要取消缩放功能的 DOM 节点。
scaleControl.cancelPinchZoom(document.getElementById('myElement'));生成一个唯一的 ID。
- (String): 唯一的 ID。
const uniqueId = scaleControl.generateUniqueId();
console.log(uniqueId); // 输出类似 "1n5s0o0km9h0000" 的唯一字符串要在网页中直接通过 <script> 标签引入 scale-controller 库并使用它，请按照以下步骤操作：
<script src="https://xxx.com/dist/scale-controller.umd.js"></script>在你的 HTML 文件中，使用 <script> 标签引入库：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Scale Controller Example</title>
</head>
<body>
<div id="myElement" style="width: 300px; height: 300px; background-color: lightblue;">Pinch to zoom me!</div>
<!-- 引入 scale-controller 库 -->
<script src="https://xxx.com/dist/scale-controller.umd.js"></script>
<script>
// 使用 scale-controller
document.addEventListener('DOMContentLoaded', function () {
scaleController.enablePinchZoom({
element: document.getElementById('myElement'),
minScale: 0.5,
maxScale: 5,
button: true,
rotate: 45,
rebound: true,
transition: 300,
});
});
</script>
</body>
</html>- 确保
element参数是一个有效的 DOM 节点。 -
enablePinchZoom方法会为指定的元素添加触摸事件监听器，请勿重复调用。 - 使用
cancelPinchZoom方法来清理事件监听器和相关的 DOM 元素。
- 如果在尝试为同一元素多次添加缩放功能时，会抛出错误。
- 如果尝试取消一个未添加缩放功能的元素的缩放，也会抛出错误。 确保在使用这些方法时妥善处理这些潜在的错误。