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

移动功能在官方实例中已有利用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.data.getLocalPosi
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值