Почему контейнер строк не центрирован? - Pixi.js

Я только начал работать с Pixi.js. Я хочу поместить несколько строк в центр холста и повернуть их. Поэтому я поместил линии в контейнер и установил точку поворота в центре контейнера. Затем я устанавливаю положение контейнера в центре холста, но он не центрируется. Зачем?

Я хочу, чтобы вывод не был Как я хочу, чтобы вывод не был но Для вывода я хочу, чтобы 2 красные линии были в центре

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

Источник

1 ответ

Решение

width а также height свойства PIXI.Container вернуть всю ширину и высоту 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>

Источник
Другие вопросы по тегам