PointerLock在vue中图片实例

1.新建一个pointerLock.js如下,之后引入到mian.js全局使用或者引入到当前组件页面都可以:)

const pointerLock = {}

pointerLock.pointerLockEvent = function (eleImage) {

  if (eleImage) {
    // 起始值
    var moveX = 0,
      moveY = 0;
    // 图片无限变换的方法
    var rotate3D = function(event) {
      moveX = moveX + event.movementX;
      moveY = moveY + event.movementY;

      eleImage.style.transform = 'rotateX(' + moveY + 'deg) rotateY(' + moveX + 'deg)';
    };

    // 触发鼠标锁定
    eleImage.addEventListener('click', function() {
      eleImage.requestPointerLock();
    });

    // 再次点击页面，取消鼠标锁定处理
    document.addEventListener('click', function() {
      if (document.pointerLockElement == eleImage) {
        document.exitPointerLock();
      }
    });

    // 检测鼠标锁定状态变化
    document.addEventListener('pointerlockchange', function() {
      if (document.pointerLockElement == eleImage) {
        document.addEventListener("mousemove", rotate3D, false);
      } else {
        document.removeEventListener("mousemove", rotate3D, false);
      }
    }, false);
  }

}


export default pointerLock

2.然后新建一个小组件imgPointerLock.vue,实例化作用于每一个图片

 //imgPointerLock.vue

//使用

3.ok辣,可以自己npm run dev 试试看. 另文章参考于这里

--by Affandi ⊙▽⊙