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입니다 ... 더 큰 서클의 반경과 같습니다

피벗 사용에 대한 본능은 정확했으며 피들은이를 사용합니다.