pixi js：ドラッグアンドドロップで円

Question

pixijsを使ってシンプルなjsゲームを作成し始めました。 Graphicsサークルのdrag'n'drop機能が必要ですが、これに関する情報は見つかりません。スプライト付きのthis exampleしか見ることができません。

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