尝试在 Pixi.js v 4.6.2 中旋转对象

Question

我试图在 Pixi.js v 4.6.2 中旋转一个对象，每次我设置旋转成员或调用 setTransform() 时，对象都会旋转但也会移动。我试过设置枢轴点但没有帮助。

我试过：

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

我在这里为您准备了一个 fiddle：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;
});

从本质上讲，您在绘制圆时的定位，加上它相对于半径的轻微偏移，意味着中心点不在绘制图形的中间，因此 'wobbling'。在我的fiddle中，绘制的圆的x和y位置现在都是180...与大圆的半径相同

您使用数据透视表的第一直觉是正确的，fiddle 使用了它。

尝试在 Pixi.js v 4.6.2 中旋转对象

Trying to rotate objects in Pixi.js v 4.6.2

pixi.js