为什么线条容器不居中？ - Pixi.js

Question

我刚开始使用 Pixi.js。我想在 canvas 的中心放置多条线并旋转它们。所以我把线放在一个容器中，并将轴心点设置在容器的中心。然后我把容器的位置设置到canvas的中心，但是没有居中。为什么？

我希望输出不是但

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

Answer 1

PIXI.Container return the entire width and height of the PIXI.Graphics 的 width 和 height 属性，包括 lineWidth 可能会增加被对象覆盖的框。

但是枢轴点 (pivotX, pivotY) 定义了对象相对于对象几何坐标的中心。

这意味着被线条覆盖的框（width和height）是（75, 100），因为居中的线条粗细为25，距离为50。

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

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

但是几何有一个框(50, 100)，因为几何点之间的距离是50。

   |--- 50 ---|

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

这会导致对象错位线宽的一半。

我不知道这是需要的行为还是某种错误。无论如何它自然行为。

您可以通过 "outer" 对齐线条来解决。

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>

为什么线条容器不居中？ - Pixi.js

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

pixi.js