https://github.com/systemlight/micro-transform2d
:dizzy: A tool for quickly setting CSS Transform.【使用JS设置CSS transform属性】
https://github.com/systemlight/micro-transform2d
css js transform2d
Last synced: 3 months ago
JSON representation
:dizzy: A tool for quickly setting CSS Transform.【使用JS设置CSS transform属性】
- Host: GitHub
- URL: https://github.com/systemlight/micro-transform2d
- Owner: SystemLight
- License: mit
- Created: 2020-05-20T06:00:41.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-08-03T06:12:54.000Z (almost 2 years ago)
- Last Synced: 2025-02-13T15:50:07.138Z (3 months ago)
- Topics: css, js, transform2d
- Language: JavaScript
- Homepage:
- Size: 742 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# micro-transform2d
[](https://www.npmjs.com/package/micro-transform2d)
> A tool for quickly setting CSS Transform
> NPM page: https://www.npmjs.com/package/micro-transform2d
# Installation
```
npm install micro-transform2d --save
```
# User Guide
```
import {Transform2D} from "micro-transform2d";
let t2d = new Transform2D(tou.el);
t2d.setRotate(rotate).setTranslate(5, 5);
```
```
注意变换是有顺序区分的，如果你要求变换按照一定顺序请初始化时这样操作
import {Transform2D} from "micro-transform2d";
let t2d = new Transform2D(tou.el);
Translate会在rotate之前执行
t2d.setTranslate().setRotate();
```
```
设置相对值
import {Transform2D} from "micro-transform2d";
let t2d = new Transform2D(tou.el);
t2d.setTranslate(x, y, true);
注意setScale的开启相对值设置时是基于当前大小进行伸缩
如当前是1，传入1.5，伸缩值为1.5，
如当前是2，传入0.5，伸缩值为1，
除此之外setScale的relative参数不是接收布尔值，而是接收number或者函数
当设置relative为number时，基于这个值进行收缩，
当设置relative为函数时时，接收一个数组为当前元素的收缩值和传入的sca值，返回sca值为想要设置的收缩值
通过函数可以更加灵活控制sca值
t2d.setScale(scale, function (val) {
let sca = relativeSca * val[1];
return sca < 0.6 ? 0.6 : sca;
});
除了setScale之外，其余方法relative参数均为布尔值，相对于元素当前偏移值增加传入值
```
```
结合micro-touch实现拖拽阻力
let pullN = 0.2;
let tg = new TouchGesture(divDom.current);
let t2d = new Transform2D(divDom.current);
t2d.setTranslate(50, 0);
tg.on("tapDown", function () {
divDom.current.style.removeProperty("transition");
t2d.setTranslate(50, 0);
});
tg.on("pressMove", function (e) {
let {moveDistance: {x, y, d}} = e;
let [nowX, nowY] = t2d.getTranslate();
if (nowY > 50) {
y *= pullN;
}
t2d.setTranslate(50, nowY + y);
});
tg.on("tapUp", function () {
divDom.current.style.transition = "500ms";
t2d.setTranslate(50, 0);
});
```
# Note
- new Transform2D(el)
- el: DOM对象
- getMatrix() : 获取Matrix属性，返回是一个大小为6的数组，代表变换矩阵
- setMatrix([1,0,0,1,0,0]) : 设置Matrix属性
- getTranslate() : 获取偏移translate
- setTranslate(x,y) : 设置偏移translate
- getScale() : 获取缩放比例
- setScale(sca) : 设置缩放比例，原比例是1
- getRotate() : 获取旋转角度
- setRotate(angle) : 设置旋转角度
- getSkew() : 获取斜切属性
- setSkew(xAngle,yAngle) : 设置斜切属性
- radian2angle() : 弧度转角度
- angle2radian() : 角度转弧度
- transform() : 获取transform属性
- setTransform(result: RegExpMatchArray | null, val: string) :
- reset() : 清除变换顺序用于重新初始变换应用顺序
- origin() : 获取变换原点
- setOrigin() : 设置变换原点
# Resources
You can read [transform2d Documentation](https://github.com/SystemLight/micro-transform2d) online for more information.
# License
micro-transform2d uses the MIT license, see LICENSE file for the details.