Skip to content

ant-tinyjs/tinyjs-plugin-transformable

Repository files navigation

tinyjs-plugin-transformable

The Tiny.js plugin for transform something

查看demo

http://tinyjs.net/plugins/tinyjs-plugin-transformable.html#demo

引用方法

起步

首先当然是要引入,推荐NPM方式,当然你也可以使用CDN或下载独立版本,先从几个例子入手吧!

1、最简单的例子

引用 Tiny.js 源码

<script src="https://gw.alipayobjects.com/os/lib/alipay/tiny.js/2.2.6/dist/browser/tiny.js"></script>
import Transformable from 'tinyjs-plugin-transformable';

const app = new Tiny.Application({
  //...
});
const container = new Tiny.Container();
app.run(container);

// 创建一个可 transformable 元素
const sprite = Tiny.Sprite.from('https://gw.alipayobjects.com/as/g/tiny/resources/1.0.0/images/logo.png');
const ta = new Tiny.Transformable(sprite);
container.addChild(ta);
2、是否贴合

即操作选框、控件是否贴合跟随被编辑的显示对象,默认是贴合的,你可以设置为不贴合:

const ta = new Tiny.Transformable(sprite, {
  frame: {
    fitness: false
  }
});
3、定制参数一览
const ta = new Tiny.Transformable(sprite, {
  frame: {
    fitness: false,
    thickness: 3,
    color: 0xff0000,
    lineOpacity: 0.5,
    fill: 0xffffff,
    fillOpacity: 0.1,
  },
  drag: {
    inScreen: true,
  },
  zoom: {
    minScale: 0.5,
    maxScale: 1.5,
  },
  rotation: {
    sprite: Tiny.Sprite.fromImage('https://gw.alipayobjects.com/as/g/tiny/resources/1.0.0/images/heart.png'),
  },
  remove: false,
  flipx: false,
  flipy: false,
});
4、激活和休眠
const ta = new Tiny.Transformable(sprite);

container.addChild(ta);
// 添加后立刻激活为编辑态
ta.activate();
// ta.deactivate() // 休眠编辑态

// 点击其他区域切为休眠
container.setEventEnabled(true);
container.hitArea = new Tiny.Rectangle(0, 0, Tiny.WIN_SIZE.width, Tiny.WIN_SIZE.height);
container.on('pointerdown', Tiny.Transformable.deactivateAll);
5、固定 Index
// 按 ta 的添加次序,固定它的 Index,即点击不提升也不置后
ta.fixedIndex(true);
6、设定拖拽范围
// 将 Tiny.Transformable 元素的拖拽范围限制在其父 container 相对范围内
Tiny.Transformable.setDragArea(
  // Tiny.Transformable 元素父容器
  container,
  // 相对 container 限制范围,用典型的 left/top + width/height
  { 
    offsetX: 100, // 相对 container 左上角 X
    offsetY: 100, // 相对 container 左上角 Y
    width: 550, // 拖拽范围 width
    height: 550, // 拖拽范围 height
    strict: true, // true: 严格元素在内部,false: 元素锚点在内部
  },
);
7、监听回调
// 点击 remove 按钮后的回调
ta.on('remove:touchend', function(e) {
  console.log('remove', e);
  this.parent.removeChild(this);
});
8、添加自定义控件
var ta = new Tiny.Transformable(sprite, {
  flipx: false, // 将右上角的位置留出来
  flipy: false,
});

ta.addWidget(
  'custom',
  'https://gw.alipayobjects.com/as/g/tiny/resources/1.0.0/images/heart.png',
  [1, -1], // 放在右上角
  {
    onTouchStart: function(e) {
      e.stopPropagation();
      console.log('custom start');
    },
    onTouchMove: function(e) {},
    onTouchEnd: function(e) {},
    onTouchCancel: function(e) {},
  }
);

依赖

API文档

http://tinyjs.net/plugins/tinyjs-plugin-transformable.html#docs

About

The Tiny.js plugin for transform something

Resources

License

Stars

Watchers

Forks

Packages

No packages published