Pixi.js 頂点をインタラクティブに動かす

pixijs-update-vertex.png

interactive=trueにする

stage.interactive = true;

マウスが動くたびに呼ばれる関数を定義

stage.mousemove=  function(mouseData) {
//座標を取得
 var x = renderer.plugins.interaction.mouse.global.x;
 var y =  renderer.plugins.interaction.mouse.global.y;
 
graphics.clear();//一回クリアする
graphics.lineStyle(2, GREEN);//クリアしたら再びラインスタイルを指定しないと描画されない
p[0]=x;
p[1]=y;
    graphics.moveTo(p[0],p[1]);
    graphics.lineTo(p[2],p[3]);//線の終点
    graphics.lineTo(p[4],p[5]);
    graphics.lineTo(p[0],p[1]);
}

アニメーションにする

アニメーションにしないと頂点の位置が変わりません

//アニメーションスタート
animate();
function animate() {
    requestAnimationFrame(animate);
    renderer.render(stage);
}

<script src="https://rawgit.com/pixijs/pixi.js/master/bin/pixi.min.js"></script>
</script>
<script type='text/javascript' >
var size=300;
var half_size=size/2.0;
var scale=half_size/3.0;
var GREEN=0xA5D9DD;
var textstyle={font:'bold 18pt Arial', fill:'white'};
var stage = new PIXI.Container();
//真ん中(0,0)範囲(±3)の座標からpixi.jsの座標に変換する
function conv(x,y){
   return new PIXI.Point(x*scale+half_size,size-(y*scale+half_size));
}
function cx(x){
   return x*scale+half_size;
}
function cy(y){
   return size-(y*scale+half_size);
}
 
var renderer = new PIXI.WebGLRenderer(size, size, {backgroundColor: 0x533E25,antialias: true,transparent:true});
document.body.appendChild(renderer.view);
 
    var graphics = new PIXI.Graphics();
   graphics.lineStyle(2, GREEN);//線の太さと色を指定
   p=[cx(0),cy(3),cx(3), cy(0),cx(-3), cy(-3)];
    graphics.moveTo(p[0],p[1]);
    graphics.lineTo(p[2],p[3]);//線の終点
    graphics.lineTo(p[4],p[5]);
    graphics.lineTo(p[0],p[1]);
   stage.addChild(graphics);
 
stage.interactive = true;
stage.mousemove=  function(mouseData) {
 var x = renderer.plugins.interaction.mouse.global.x;
 var y =  renderer.plugins.interaction.mouse.global.y;
 
graphics.clear();
graphics.lineStyle(2, GREEN);//線の太さと色を指定
p[0]=x;
p[1]=y;
    graphics.moveTo(p[0],p[1]);
    graphics.lineTo(p[2],p[3]);//線の終点
    graphics.lineTo(p[4],p[5]);
    graphics.lineTo(p[0],p[1]);
}
//アニメーションスタート
animate();
function animate() {
    requestAnimationFrame(animate);
    renderer.render(stage);
}
</script>
<body>
</body>

サポートサイト Wikidot.com