Pixi.jsどのようにOOPオブジェクトでmoveToを使用しますか？

Question

OOPメソッドで長方形と正方形オブジェクトを作成します。

次に、別の位置に四角形を移動します。私は関数moveToを使用します。

私の矩形は移動しますが、絶対位置からではなく作成位置から移動します。

この四角形をx = 100、y = 100に移動するには何を指定する必要がありますか？

var container = new PIXI.Container(); 
 

 
var renderer = PIXI.autoDetectRenderer(320, 480,{backgroundColor : 0x1099bb}); 
 

 
document.body.appendChild(renderer.view); 
 

 
requestAnimationFrame(animate); 
 

 
var blue= 0x00c3ff 
 
    
 
var red = 0xFF0040 
 

 
var SHAPE={} 
 

 
SHAPE.geom = function(posx,posy,width,height,color) { 
 
\t PIXI.Graphics.call(this,posx,posy,width,height,color); 
 
\t this.beginFill(color); 
 
\t this.drawRect(posx,posy,width,height) 
 
} 
 

 

 
SHAPE.geom.prototype = Object.create(PIXI.Graphics.prototype); 
 
SHAPE.geom.prototype.constructor = SHAPE.geom; 
 

 
var square=new SHAPE.geom(10,10,10,10,red) 
 

 
var rect=new SHAPE.geom(200,400,80,30,blue) 
 

 
rect.moveTo(100,100) 
 

 
\t container.addChild(square,rect); 
 

 

 
\t function animate() { 
 

 
\t \t requestAnimationFrame(animate); 
 
\t \t renderer.render(container); 
 
\t }

Answer 1

のmoveToのためPIXIのドキュメントを確認してください：https://pixijs.github.io/docs/PIXI.Graphics.html#moveTo

これは、いくつかの座標ではなく、実際の既存のオブジェクトに描画位置を移動します。したがって、moveToとその描画の後でグラフィックスオブジェクトを使用する場合は、その位置から描画を開始する必要があります。少なくとも理論的には（私はmoveToをこれまで使用していません）。

表示オブジェクトを親コンテナ内に配置する場所を設定するには、オブジェクトの.x、.yまたは.positionプロパティを使用する必要があります。そうですね、 rect.x = 100; rect.y = 100; または rect.position = new PIXI.Point（100,100）;

問題がある場合は、私に知らせてください。私はあなたに実践的な例を与えるために大慌てをします。残念ながら、私はそれのための時間がありません。

また、一般的にはplunkr、jsfiddleなどの簡単な例を作成することをお勧めします。それであなたが答えた人はあなたのコードを簡単に修正して、あなたに確実に動作する例を表示することができます。両方の方が良いでしょう。