How to use absolute coords in pixijs

user_16744227 0
Viewed 211

My question is about moving lines and rects using absolute coords.

  1. I created line:
const line = new PIXI.Graphics();
line.lineStyle(2, 0xffffff);
line.moveTo(100, 200);
line.lineTo(300, 200);
app.stage.addChild(line);

But if I will try to set coords by changing x/y it will be relative to created pos:

line.x = 200; // real x will be 300
line.y = 200; // real y will be 400

How should I move this line if i need to set absolute coords on view? Should I always calc absolute coords using current?

  1. Same question about rect, I create it like this:
const blueBox = new PIXI.Graphics();
blueBox.beginFill(0x0000ff);
blueBox.drawRect(50, 50, 50, 50);
blueBox.endFill();
app.stage.addChild(blueBox);

If i will try to move it using x/y i will do same as line - x/y are relative, ok. I can always draw rects at 0/0 point and then move them, but is it correct desigin, is there other way?

pixi.js canvas javascript
1 Answers

As a general rule you shouldn't trigger redraws on Graphics objects if they don't change visually. It's a computationally expensive operation, and merely repositioning the object doesn't justify calling it.

A better alternative is painting the line or rect using local coordinates and placing it at the target absolute position by setting the position property. I prefer to keep (0, 0) as the center of the shape, but choosing the top-left corner or any other point of reference is also valid. For a rectangle it would look like this:

const blueBox = new PIXI.Graphics();
blueBox.beginFill(0x0000ff);
blueBox.drawRect(-25, -25, 50, 50);
blueBox.endFill();
blueBox.position.set(25, 25);
app.stage.addChild(blueBox);

From this point, all changes to the absolute position of the rectangle should happen by changing the position property, not by redrawing the graphics with the new coordinates.

user_28866880
Related