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

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

0 голосов
/ 17 ноября 2018

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

Я хочу, чтобы вывод не был How I want the output not to be, но For the output I want the 2 red lines be centered

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 Ответ

0 голосов
/ 18 ноября 2018

Свойства 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>
...