移动功能在官方实例中已有利用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;
}
}