Pixi.jsでオブジェクトを回転しようとしていますv 4.6.2

Question

Pixi.js v 4.6.2でオブジェクトを回転しようとしています。回転メンバを設定したり、setTransform（）を呼び出すたびにオブジェクトが回転しますが、移動される。私はピボットポイントを設定しようとしましたが、それは役に立たなかった。

Here is a fiddle

私が試してみました：

compass.rotation += .5; 

と：

compassContainer.setTransform(0, 0, 1, 1, 0.5, 0,0, 00,00); 

をして：ここでは

compassContainer.rotation += 0.5; 

は、すべてのコードです：

var app = new PIXI.Application(400, 400, { antialias: true }); 
document.body.appendChild(app.view); 

// Render the compass 
var compassContainer = new PIXI.Container(); 

var compass = new PIXI.Graphics(); 

compass.beginFill(0xFF3300); 
compass.lineStyle(4, 0xffd900, 1); 

compass.lineStyle(0); 
compass.beginFill(0xFFFF0B, 0.5); 
compass.drawCircle(200, 200, 180); 
compass.endFill(); 

compass.lineStyle(0); 
compass.beginFill(0xFFFFFF, 1); 
compass.drawCircle(200, 200, 150); 
compass.endFill(); 

compass.lineStyle(4, 0xFF0000, 1); 
compass.moveTo(200, 20); 
compass.lineTo(200, 40); 

compassContainer.addChild(compass); 

app.stage.addChild(compassContainer); 


// Render the boat 
var boat = new PIXI.Graphics(); 

boat.beginFill(0xFF3300); 
boat.lineStyle(4, 0xffd900, 1); 

boat.moveTo(200, 100); 
boat.lineTo(175, 250); 
boat.lineTo(225, 250); 
boat.lineTo(200, 100); 
boat.endFill(); 

// Add boat 
app.stage.addChild(boat); 


// Rotate compass 
// compass.rotation += .5; 
compassContainer.setTransform(0, 0, 1, 1, 0.5, 0,0, 00,00); 
// compassContainer.rotation = 0; 

Answer 1

私はここにあなたのための固定されたバイオリンを持っている：https://jsfiddle.net/themoonrat/cfaq34g7/

var app = new PIXI.Application(400, 400, { antialias: true }); 
document.body.appendChild(app.view); 

// Render the compass 
var compassContainer = new PIXI.Container(); 

var compass = new PIXI.Graphics(); 

compass.beginFill(0xFF3300); 
compass.lineStyle(4, 0xffd900, 1); 

compass.lineStyle(0); 
compass.beginFill(0xFFFF0B, 0.5); 
compass.drawCircle(180, 180, 180); 
compass.endFill(); 

compass.lineStyle(0); 
compass.beginFill(0xFFFFFF, 1); 
compass.drawCircle(180, 180, 150); 
compass.endFill(); 

compass.lineStyle(4, 0xFF0000, 1); 
compass.moveTo(180, 20); 
compass.lineTo(180, 40); 

compassContainer.addChild(compass); 

app.stage.addChild(compassContainer); 


// Render the boat 
var boat = new PIXI.Graphics(); 

boat.beginFill(0xFF3300); 
boat.lineStyle(4, 0xffd900, 1); 

boat.moveTo(200, 100); 
boat.lineTo(175, 250); 
boat.lineTo(225, 250); 
boat.lineTo(200, 100); 
boat.endFill(); 

// Add boat 
app.stage.addChild(boat); 

compassContainer.position.set(200, 200); 
compassContainer.pivot.x = compassContainer.width/2; 
compassContainer.pivot.y = compassContainer.height/2; 

app.ticker.add(function(delta) { 
    // rotate the container! 
    // use delta to create frame-independent tranform 
    compassContainer.rotation -= 0.01 * delta; 
}); 

基本的に、それと組み合わせて、円のあなたの位置付け、それを描く、若干の半径に比べてオフセット、センターことを意味しますポイントは描かれたグラフィックの真ん中ではなく、従って「ぐらつき」でした。私のフィドルでは、描画された円のxとyの位置は両方とも180です...より大きな円の半径と同じ

あなたの最初の本能はピボットを使用していました。