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.getLocalPosition(this.parent);
          this.x = newPosition.x - this.dragPoint.x;
          this.y = newPosition.y - this.dragPoint.y;
      }
  }

利用position实现的移动，因为利用position实现会与Sprite和Container形状有关，所以把生成过程也记下。
效果图：

var texture = PIXI.Texture.fromFrame("iamges/body.png");
var body = new Sprite(texture);
var rotate = new Sprite(
  resources["./images/rotate.png"].texture
);
var close = new Sprite(
  resources["./images/close.png"].texture
);
var scale = new Sprite(
  resources["./images/zoom.png"].texture
);

var border = new PIXI.Graphics();  //  绘制虚线轮廓
border.lineStyle(0.5, 0xFFFFFF, 0.5);
border.drawRect(0, 0, body.width, body.height);
border.endFill();
border.x = body.x - 10;
border.y = body.y - 10;
border.width = body.width + 20;
border.height = body.height + 20;
rotate.width = 32;
rotate.height = 24;
rotate.x = border.x + border.width;
rotate.y = border.y;
rotate.defaultstate = true;  //  默认显示旋转按钮
close.width = 32;
close.height = 24;
close.x = border.x - close.width;
close.y = border.y + border.height - close.height;
scale.width = 32;
scale.height = 24;
scale.x = border.x + border.width;
scale.y = border.y + border.height - scale.height;
scale.defaultstate = true;  //  默认显示缩放按钮
border.interactive = scale.interactive = close.interactive = rotate.interactive = body.interactive = true;
var materialContainer = new PIXI.Container();  //  精灵分组
materialContainer.addChild(body);
materialContainer.addChild(border);
materialContainer.addChild(rotate);
materialContainer.addChild(close);
materialContainer.addChild(scale);
materialContainer.position.set(100, 100);  //    设置位置
materialContainer.pivot.set(body.width / 2, body.height / 2);
app.stage.addChild(materialContainer);

//materialContainer绑定事件
//.....
//.....

function onDragStart(event) {
  if (!this.dragging) {
    var oClickStagePosition = this.data.getLocalPosition(this.parent)
    var angle = this.rotation / 0.78 * (-45) * (2 * Math.PI / 360);  //因为有旋转功能 所以要把旋转后角度计算进去

    var x = oClickStagePosition.x - this.position.x;
    var y = oClickStagePosition.y - this.position.y;
    var x1 = x * Math.cos(angle) - y * Math.sin(angle);
    var y1 = y * Math.cos(angle) + x * Math.sin(angle);
    this.pivot.set(this.children[0].width / 2 + x1, this.children[0].height / 2 + y1);
    this.position.x = this.position.x + x;
    this.position.y = this.position.y + y;
  }
}

function onDragEnd() {
  if (this.dragging) {
    var oClickStagePosition = this.data.getLocalPosition(this.parent);
    this.position.x = oClickStagePosition.x;
    this.position.y = oClickStagePosition.y;
  }
}

function onDragMove() {
  if (this.dragging) {
    var angle = this.rotation / 0.78 * (45) * (2 * Math.PI / 360);
    var x1 = (this.pivot.x - this.children[0].width / 2) * Math.cos(angle) - (this.pivot.y - this.children[0].height / 2) * Math.sin(angle);
    var y1 = (this.pivot.y - this.children[0].height / 2) * Math.cos(angle) + (this.pivot.x - this.children[0].width / 2) * Math.sin(angle);
    this.position.x = this.position.x - x1;
    this.position.y = this.position.y - y1;
    this.pivot.set(this.children[0].width / 2, this.children[0].height / 2);
    this.dragging = false;
    this.data = null;
  }
}