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; } }

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; } }