为什么行的容器不居中？ - Pixi.js答案

【问题标题】：Why is the container of lines not centered? - Pixi.js为什么行的容器不居中？ - Pixi.js
【发布时间】：2019-10-02 23:18:22
【问题描述】：

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

我希望输出不是，而是

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

【解决方案1】：

PIXI.Container 的width 和height 属性返回PIXI.Graphics 的整个宽度和高度，包括lineWidth，这可能会增加被对象覆盖的框。

但是轴心点（pivotX、pivotY）定义了相对于对象几何坐标的对象中心。

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

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

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

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

   |--- 50 ---|

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

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

我不知道这是一种通缉行为还是某种错误。无论如何它自然行为。

您可以通过“外部”对齐线条来解决问题。

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);

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.2/pixi.min.js"&gt;&lt;/script&gt;

【讨论】：

您能否改进可能会增加对象转换的面积。第一段中的部分？我认为你弄错了，因为我不明白这句话。
“无论如何都是自然行为。”，你不是说这是不自然的行为吗？否则请解释。
@MatMis 不，感觉很自然。在背景中，矩阵变换应用于顶点坐标。在这种情况下width/2 == 37,5。按此偏移量进行的平移会导致您的问题的结果与 x 分量分别为 0 和 50 的顶点坐标。