Question

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

我希望输出不是，而是

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.2/pixi.min.js"></script>

为什么线的容器没有居中？ -Pixi.js

1 个答案: