来自 http://scottmcdonnell.github.io/pixi-examples/index.html?s=demos&f=dragging.js&title=Dragging
图形和精灵的拖放操作方式相同。
var renderer = PIXI.autoDetectRenderer(800, 600, { antialias: true });
document.body.appendChild(renderer.view);
var stage = new PIXI.Container();
stage.interactive = true;
var graphics = new PIXI.Graphics();
graphics.interactive = true;
graphics.lineStyle(0);
graphics.beginFill(0xFFFF0B, 0.5);
graphics.drawCircle(0, 0, 60);
graphics.endFill();
graphics.x = 100;
graphics.y = 100;
stage.addChild(graphics);
// setup events
graphics
.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)
{
// store a reference to the data
// the reason for this is because of multitouch
// we want to track the movement of this particular touch
this.data = event.data;
this.alpha = 0.5;
this.dragging = true;
}
function onDragEnd()
{
this.alpha = 1;
this.dragging = false;
// set the interaction data to null
this.data = null;
}
function onDragMove()
{
if (this.dragging)
{
var newPosition = this.data.getLocalPosition(this.parent);
this.position.x = newPosition.x;
this.position.y = newPosition.y;
}
}
// run the render loop
animate();
function animate() {
renderer.render(stage);
requestAnimationFrame( animate );
}