pixi-js:拖放圆形

Question

我开始使用pixijs创建简单的js游戏。我需要图形圈的拖放功能，但找不到这方面的信息。我只看到这个精灵的例子。

Answer 1

拖放对图形和精灵的作用相同。

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

Answer 2

您还需要为该圆指定hitArea，才能将鼠标事件附加到它上。阅读GoodBoyDigital的This Answer。