滚动
- 插件名:Scroller
- npm:tinyjs-plugin-scroller
Tiny.js 使用了 scroller,你可以通过 Tiny.Scroller
获得,举个栗子:
var scroller = new Tiny.Scroller(function(left, top, zoom) {
// apply coordinates/zooming
// 滚动的状态同步给 container
container.position.y = -top;
}, {
// 只设置 Y 轴方向可滚动
scrollingY: true,
});
var ant = Tiny.Sprite.fromImage('https://zos.alipayobjects.com/rmsportal/IJwbZnAkuJOhKqDXngUm.png');
var container = new Tiny.Container();
// 设置滚动的规模,参数依次是 clientWidth, clientHeight, contentWidth, contentHeight
scroller.setDimensions(Tiny.WIN_SIZE.width, Tiny.WIN_SIZE.height, Tiny.WIN_SIZE.width, Tiny.WIN_SIZE.height);
// 设置 container 可交互
container.interactive = true;
// 设置 container 的可触发区域
container.hitArea = new Tiny.Rectangle(0, 0, Tiny.WIN_SIZE.width, Tiny.WIN_SIZE.height);
container.addChild(ant);
// 按下时的事件监听
container.on('pointerdown', function (data) {
var e = data.data.originalEvent;
// 同步给 scroller,如果是移动端则使用 e.changedTouches,如果是 PC 上则使用 [e]
scroller.doTouchStart(e.touches || [e], e.timeStamp);
});
// 移动时的事件监听
container.on('pointermove', function (data) {
var e = data.data.originalEvent;
scroller.doTouchMove(e.touches || [e], e.timeStamp, e.scale);
});
// 抬起时的事件监听
container.on('pointerup', function (data) {
const e = data.data.originalEvent;
scroller.doTouchEnd(e.timeStamp);
});
// 移出屏幕的事件监听
container.on('pointerupoutside', function (data) {
const e = data.data.originalEvent;
scroller.doTouchEnd(e.timeStamp);
});
效果如下: