滚动

  • 插件名: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);
});

效果如下: