# @arco-design/transformable 中文文档

规范地址：https://npmcn.com/package/%40arco-design/transformable/

版本：1\.0\.2
npm 元数据更新时间：2024-07-09T07:30:01.133Z
中文译文更新时间：2026-11-06T15:01:20.335Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40arco-design/transformable
原文对照：https://npmcn.com/package/%40arco-design/transformable/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：512 kB，29 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2022-06-05T08:40:14.082Z
- 最新版本发布：2022-06-05T08:40:14.301Z
- 近 30 天下载量：5436（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：1（近 12 个月 0 个）

## 中文简介

新fe可转换模块

## 安装

```sh
npm install @arco-design/transformable
```

也可以使用：`pnpm add @arco-design/transformable`、`yarn add @arco-design/transformable`、`bun add @arco-design/transformable`

## README

变形 - 强大的2D手势

## 预览

* * *

![Effect Preview](https://sf1-cdn-tos.toutiaostatic.com/obj/arco-mobile/_static_/transformable.gif)

## 安装

* * *

以 [npm 软件包](https://www.npmjs.com/package/@arco-design/transformable)

```bash
// with npm
npm install @arco-design/transformable

// with yarn
yarn add @arco-design/transformable
```

## 快速启动

* * *

```javascript
import TransformAble from '@arco-design/transformable';

function MyComponent() {
    const domRef = useRef(null);
    const controllerRef = useRef(null);
    useEffect(() => {
        controllerRef.current = new TransformAble({
            dom: this.dom,
            onTransform: (state) => {
                const { translateX, translateY, scale, transformOrigin } = state;
                // DO SOMETHING IF NECESSARY
            },
        });
    }, []);
    function resetDom() {
        controllerRef.current.zoomTo(1, {
            fitEdge: true,
        });
    }
    return (
        <div className="transform-container"
            style={{ overflow: 'hidden' }}
        >
            <div
                className="transform-demo-object"
                ref={domRef}
            >
            <Button onClick={resetDom}>reset</Button>
        </div>
    )
}
```

## 选项

* * *

所有这些选项都可以通过调用来改变动态 `.config()`

| 名称 | 类型 | 默认 | 撤销 |
| --- | --- | --- | --- |
| 活动 | 布尔 | 真实 | 交互式可用状态旗 |
| 最大比例 | 编号 | 2个 | 最大比例限制 |
| 分钟比例 | 编号 | 0.5 (韩语) | 分钟比例限制 |
| 防止滚动 | 布尔 | 真实 | 三相机 e. 预防 |
| 数字 | HTML 元素 | 无效 | 转换交互式目标( m) |
| 使用边界 | 布尔 | 真实 | 决定如何计算目标边界以进行碰撞探测(内缘).  
`true`: 使用 `dom.getBoundingClientRect` 当圆顶被设置时;  
`false`: 手动设置 `.setBoundary()` |
| 弹出 | 编号 | 三百块 | 缩放动画持续时间( 毫秒) |
| 潮湿 | 编号 | 2个 | 以动量为基础的滚动选项, 每个帧的减速, 默认为 2px/ 帧 |
| 反弹RateX | 编号 | 0 个 | 拖出取景口时拖出坝\[译出偏移/触取偏移\],设置值 (0, 1\] 以允许拖出边缘并带起坝效果并反弹动画 |
| 反弹RateX | 编号 | 0 个 | 当拖出(y-轴)视图时拖出( 相同到上方) 拖出( translate difference / touch difference) |
| 动议 阈值 | 编号 | 10个 | 流派动量滚动效应的分钟速度, 默认为 10px/ frame |
| 已固定X | 布尔 | 虚假 | 禁用 x 轴拖曳 |
| 固定 Y | 布尔 | 虚假 | 禁用 y 轴拖曳 |
| 拖动模式 | 字符串 | 疯狂的" | 拖动效果模式 .  
`'always'`: 允许不缩放而拖放;  
`'hybrid'`: 仅在缩放时才允许拖放;  
`'none'`: 不拖动 |
| 刷新模式 | 字符串 | "动画" | 决定如何执行以动能为基础的滚动动画.  
`'animation'`页:1 `<style>` cs 动画触发时的宣告;  
`'transition'`: 动画触发时使用过渡易用功能 |
| 转换模式 | 字符串 | "翻译第一" | 动画效果在拖放和缩放时可能有所不同.  
`'translate-first'`: set css 属性 `transform` 作为 `translate()scale()`· ;  
`'scale-first'`设置 `transform` 作为 `scale()translate()`· ;  
`'matrix'`设置 `transform` 作为 `matrix()` |
| 立方块 | 对象 | {  
卷轴:\[33, 1,.66, 1\],  
\[17、1、17、1\],  
{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 | 滚动/弹出效果的动因缓和函数(立方体-贝塞尔) |
| 视图 | 对象 | {  
左边:0,  
右边:屏幕Width,  
顶部: 0,  
底部: 屏幕高度  
{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 | 相撞探测的视门范围,边缘被定义为视门 qq边界 |

## 常见问题

### @arco-design/transformable 是什么？

新fe可转换模块

### 如何安装 @arco-design/transformable？

在项目目录运行 npm install @arco-design/transformable，或使用 pnpm add / yarn add / bun add。

### @arco-design/transformable 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/arco-design\_\_transformable 是否存在。

### @arco-design/transformable 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @arco-design/transformable 可以商用吗？

@arco-design/transformable 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @arco-design/transformable 的下载量有多少？

根据 npm 官方下载统计，@arco-design/transformable 在 2026/10/07 – 2026/11/05 这 30 天内被下载 5,436 次，日均约 181 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @arco-design/transformable 还在维护吗？

最新版本 1\.0\.2 发布于 2022/06/05（4 年前）；至今共发布 1 个版本，其中过去 12 个月发布了 0 个；首次发布于 2022/06/05。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。