关于PIXI引擎制作页面小游戏的几个总结

1.有交互的元素一定要设interactive属性为true,否则监听的事件都将无反应。

2.使用css旋转画布的方式会导致事件响应错乱，应该使用内置旋转的方法

3.Canvas横屏适配问题。

// 利用 CSS3 旋转 对根容器逆时针旋转 90 度function detectOrient() {let width = document.documentElement.clientWidth,
  height = document.documentElement.clientHeight,
  ratio = _view.height / height;  // 横屏自适应
  _view.width = width*ratio;if (width >= height) {  // 判断是横屏
  isHorizontalScreen = true;  // 隐藏--横屏提示
  $('#modal').hide();
  $('#loading').removeClass('hide');

  $('.section').css({    'width': width,    'height': height,    'top': 0,    'left': 0,    '-webkit-transform': 'none',    'transform': 'none',    '-webkit-transform-origin': '0 0',    'transform-origin': '0 0'
  });
} else {  // 判断是竖屏
  isHorizontalScreen = true;  // 隐藏--横屏提示
  $('#modal').show();

  $('.section').css({    'font-size': '625%',    'width': height,    'height': width,    'top': (height - width) / 2,    'left': -(height - width) / 2,    '-webkit-transform': 'rotate(90deg)',    'transform': 'rotate(90deg)',    '-webkit-transform-origin': 'center center',    'transform-origin': 'center center'
  });
}
}window.onresize = detectOrient;
detectOrient();

作者：谭瞎
链接：https://www.jianshu.com/p/8a48a332d7e1