CODEWITHSUNDEEP
pixi.js
MatMis
MatMis

Reputation: 319

Why is the container of lines not centered? - Pixi.js

I just got started with Pixi.js. I want to put multiple lines in the center of the canvas and rotate them. So I put the lines in a container and set the pivit point on the center of the container. Then I set the position of the container to the center of the canvas, but it is not centered. Why?

I want the output not to be How I want the output not to be but For the output I want the 2 red lines be centered

var app = new PIXI.Application({ 
  width: 200,
  height: 200,
  antialias: true
});
app.renderer.backgroundColor = 0x061639;
document.body.appendChild(app.view);

function createLine(offset){
  let line = new PIXI.Graphics()
  line.lineStyle(25, 0xBB0000);
  line.x = offset;
  line.y = 0;
  line.moveTo(0, 0);
  line.lineTo(0, 100);
  return line;
}

let line1 = createLine(0);
let line2 = createLine(50);
let container = new PIXI.Container();
container.addChild(line1, line2);
container.pivot.x = container.width/2;
container.pivot.y = container.height/2;
container.x = app.screen.width/2;
container.y = app.screen.height/2;
//container.rotation = Math.PI/180*45; //rotate 45 degrees

app.stage.addChild(container);
<!doctype html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.2/pixi.js"></script>
</head>
<body></body>
</html>

JSFiddle

Upvotes: 1

Views: 1353

Answers (1)

Rabbid76
Rabbid76

Reputation: 210889

The width and height properties of the PIXI.Container return the entire width and height of the PIXI.Graphics including the lineWidth which may increase the box which is covered by the object.

But the pivot point (pivotX, pivotY) defines the center of the object in relation to the geometrically coordinates of the object.

This means that the box (width and height) covered by the lines is (75, 100), because the centered lines have a thickness of 25 and a distance of 50.

|------ 75 ------|

+--x--+    +--x--+
|     |    |     |
|     |    |     |
|     |    |     |

But the geometry has a box of (50, 100), because the distance between the geometrically points is 50. 

   |--- 50 ---|

+--x--+    +--x--+
|     |    |     |
|     |    |     |
|     |    |     |

This causes that the object is misaligned by the half of the line width.

I don't know if this is a wanted behavior or it is some kind of bug. Anyway it natural behavior.

You can work around by "outer" aligning the lines.

line.lineStyle(25, 0xBB0000, 1, 1); 


var app = new PIXI.Application({ 
  width: 200,
  height: 200,
  antialias: true
});
app.renderer.backgroundColor = 0x061639;
document.body.appendChild(app.view);

function createLine(offset){
  let line = new PIXI.Graphics()
  line.lineStyle(25, 0xBB0000, 1, 1);
  line.x = offset;
  line.y = 0;
  line.moveTo(0, 0);
  line.lineTo(0, 100);
  return line;
}

let line1 = createLine(0);
let line2 = createLine(50);
let container = new PIXI.Container();
container.addChild(line1, line2);
container.pivot.x = container.width/2;
container.pivot.y = container.height/2;
container.x = app.screen.width/2;
container.y = app.screen.height/2;

app.stage.addChild(container);
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.2/pixi.min.js"></script>

Upvotes: 1

Related Questions