scale-controller
v0.0.3
Published
指定的div 元素，使其可以双指缩放，用于为网页元素添加触摸缩放功能。
Downloads
211
Maintainers
lincq_npmReadme
scale-controller 调用文档
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';API
scale-controller 暴露了以下 API：
enablePinchZoom(params)
启用元素的触摸缩放功能。
参数
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,
});cancelPinchZoom(element)
取消元素的触摸缩放功能。
参数
element(String | HTMLElement): 需要取消缩放功能的 DOM 节点。
示例
scaleControl.cancelPinchZoom(document.getElementById('myElement'));generateUniqueId()
生成一个唯一的 ID。
返回值
- (String): 唯一的 ID。
示例
const uniqueId = scaleControl.generateUniqueId();
console.log(uniqueId); // 输出类似 "1n5s0o0km9h0000" 的唯一字符串要在网页中直接通过 <script> 标签引入 scale-controller 库并使用它，请按照以下步骤操作：
2. 获取库的 URL
<script src="https://xxx.com/dist/scale-controller.umd.js"></script>3. 在 HTML 中引入库
在你的 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 元素。
错误处理
- 如果在尝试为同一元素多次添加缩放功能时，会抛出错误。
- 如果尝试取消一个未添加缩放功能的元素的缩放，也会抛出错误。 确保在使用这些方法时妥善处理这些潜在的错误。