pixi.js 实现Sprite跟随鼠标移动

最新推荐文章于 2024-07-16 16:49:46 发布

vonvon_chris

最新推荐文章于 2024-07-16 16:49:46 发布

阅读量4.7k

点赞数

分类专栏： Web 文章标签： pixi.js

本文链接：https://blog.csdn.net/Akony/article/details/80925200

版权

博客介绍了如何在pixi.js中通过调整Sprite的position属性来实现跟随鼠标移动的效果，同时提到了官方实例中的dragPoint方法存在的问题，并分享了作者自己实现的解决方案及其实现过程。

摘要由CSDN通过智能技术生成

移动功能在官方实例中已有利用dragPoint实现，不过在开发过程中因为与需求有个冲突bug，所以又重新写了一个利用position.x\y实现的，虽然并没有直接解决不过也记录下吧。哎哎哎哎

官方实例代码：链接

obj.on('mousedown', onDragStart)
   .on('touchstart', onDragStart)
   .on('mouseup', onDragEnd)
   .on('mouseupoutside', onDragEnd)
   .on('touchend', onDragEnd)
   .on('touchendoutside', onDragEnd)
   .on('mousemove', onDragMove)
   .on('touchmove', onDragMove);

function onDragStart(event) {
   
      if (!this.dragging) {
          this.data = event.data;
          this.dragging = true;

          this.scale.x *= 1.1;
          this.scale.y *= 1.1;
          this.dragPoint = event.data.getLocalPosition(this.parent);
          this.dragPoint.x -= this.x;
          this.dragPoint.y -= this.y;
      }
  }

  function onDragEnd() {
   
      if (this.dragging) {
          this.dragging = false;
          this.scale.x /= 1.1;
          this.scale.y /= 1.1;
          this.data = null;
      }
  }

  function onDragMove() {
   
      if (this.dragging) {
          var newPosition = this.