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 
but
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
pixi.js pixijs
asked Nov 17 '18 at 20:18
MatMisMatMis
459
add a comment |
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 but
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
pixi.js pixijs
asked Nov 17 '18 at 20:18
MatMisMatMis
459
add a comment |
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 but
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
pixi.js pixijs
asked Nov 17 '18 at 20:18
MatMisMatMis
459
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 but
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
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>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>pixi.js pixijs
pixi.js pixijs
asked Nov 17 '18 at 20:18
MatMisMatMis
459
asked Nov 17 '18 at 20:18
MatMisMatMis
459
edited Nov 17 '18 at 22:22
MatMis
asked Nov 17 '18 at 20:18
MatMisMatMis
459
asked Nov 17 '18 at 20:18
MatMisMatMis
459
asked Nov 17 '18 at 20:18
MatMisMatMis
459
459
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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>answered Nov 18 '18 at 8:43
Rabbid76Rabbid76
35.3k113147
Can you improve which may increase the are which is converted by the object. part in the first paragraph? I think you made a mistake because I don't understand the sentence.
– MatMis
Nov 18 '18 at 20:49
"Anyway it natural behavior.", Don't you mean it's unnatural behavior? Otherwise please explain.
– MatMis
Nov 18 '18 at 21:03
@MatMis No, it feels natural. In the background matrix transformations are applied to vertex coordinates. In this casewidth/2 == 37,5. A translation by this offset causes the result of your question to vertex coordinates with a x component of 0 respectively 50.
– Rabbid76
Nov 18 '18 at 21:55
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53355187%2fwhy-is-the-container-of-lines-not-centered-pixi-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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>answered Nov 18 '18 at 8:43
Rabbid76Rabbid76
35.3k113147
Can you improve which may increase the are which is converted by the object. part in the first paragraph? I think you made a mistake because I don't understand the sentence.
– MatMis
Nov 18 '18 at 20:49
"Anyway it natural behavior.", Don't you mean it's unnatural behavior? Otherwise please explain.
– MatMis
Nov 18 '18 at 21:03
@MatMis No, it feels natural. In the background matrix transformations are applied to vertex coordinates. In this casewidth/2 == 37,5. A translation by this offset causes the result of your question to vertex coordinates with a x component of 0 respectively 50.
– Rabbid76
Nov 18 '18 at 21:55
add a comment |
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>answered Nov 18 '18 at 8:43
Rabbid76Rabbid76
35.3k113147
Can you improve which may increase the are which is converted by the object. part in the first paragraph? I think you made a mistake because I don't understand the sentence.
– MatMis
Nov 18 '18 at 20:49
"Anyway it natural behavior.", Don't you mean it's unnatural behavior? Otherwise please explain.
– MatMis
Nov 18 '18 at 21:03
@MatMis No, it feels natural. In the background matrix transformations are applied to vertex coordinates. In this casewidth/2 == 37,5. A translation by this offset causes the result of your question to vertex coordinates with a x component of 0 respectively 50.
– Rabbid76
Nov 18 '18 at 21:55
add a comment |
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>answered Nov 18 '18 at 8:43
Rabbid76Rabbid76
35.3k113147
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>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>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>answered Nov 18 '18 at 8:43
Rabbid76Rabbid76
35.3k113147
edited Nov 18 '18 at 20:50
answered Nov 18 '18 at 8:43
Rabbid76Rabbid76
35.3k113147
answered Nov 18 '18 at 8:43
Rabbid76Rabbid76
35.3k113147
answered Nov 18 '18 at 8:43
Rabbid76Rabbid76
35.3k113147
35.3k113147
Can you improve which may increase the are which is converted by the object. part in the first paragraph? I think you made a mistake because I don't understand the sentence.
– MatMis
Nov 18 '18 at 20:49
"Anyway it natural behavior.", Don't you mean it's unnatural behavior? Otherwise please explain.
– MatMis
Nov 18 '18 at 21:03
@MatMis No, it feels natural. In the background matrix transformations are applied to vertex coordinates. In this casewidth/2 == 37,5. A translation by this offset causes the result of your question to vertex coordinates with a x component of 0 respectively 50.
– Rabbid76
Nov 18 '18 at 21:55
add a comment |
Can you improve which may increase the are which is converted by the object. part in the first paragraph? I think you made a mistake because I don't understand the sentence.
– MatMis
Nov 18 '18 at 20:49
"Anyway it natural behavior.", Don't you mean it's unnatural behavior? Otherwise please explain.
– MatMis
Nov 18 '18 at 21:03
@MatMis No, it feels natural. In the background matrix transformations are applied to vertex coordinates. In this casewidth/2 == 37,5. A translation by this offset causes the result of your question to vertex coordinates with a x component of 0 respectively 50.
– Rabbid76
Nov 18 '18 at 21:55
Can you improve which may increase the are which is converted by the object. part in the first paragraph? I think you made a mistake because I don't understand the sentence.
– MatMis
Nov 18 '18 at 20:49
Can you improve which may increase the are which is converted by the object. part in the first paragraph? I think you made a mistake because I don't understand the sentence.
– MatMis
Nov 18 '18 at 20:49
"Anyway it natural behavior.", Don't you mean it's unnatural behavior? Otherwise please explain.
– MatMis
Nov 18 '18 at 21:03
"Anyway it natural behavior.", Don't you mean it's unnatural behavior? Otherwise please explain.
– MatMis
Nov 18 '18 at 21:03
@MatMis No, it feels natural. In the background matrix transformations are applied to vertex coordinates. In this case
width/2 == 37,5. A translation by this offset causes the result of your question to vertex coordinates with a x component of 0 respectively 50.– Rabbid76
Nov 18 '18 at 21:55
@MatMis No, it feels natural. In the background matrix transformations are applied to vertex coordinates. In this case
width/2 == 37,5. A translation by this offset causes the result of your question to vertex coordinates with a x component of 0 respectively 50.– Rabbid76
Nov 18 '18 at 21:55
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53355187%2fwhy-is-the-container-of-lines-not-centered-pixi-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
