Equivalent of "ctx.save() / ctx.restore()" for PIXI.Graphics?

[codevinsky]

I need to do some offset manipulation that would be, frankly, ridiculously easy to do with a canvas context.

 

Is there an equivalent of the canvas.context.save -> .translate -> {draw} -> .restore() methods for the PIXI.Graphics context?

[Sebi]

Could you provide a sample of what you are trying to achieve?

 

Setting the position works for Graphics the same way it does for sprites. (.x, .y or position.x and position.y)

You could also hack something into the renderGraphics method of PIXI if you really need that.

 

Besides that you can render your Graphics object to a Texture and then apply all kind of fancy stuff.

Or you could as well create your Graphic on canvas to begin with and then create a Texture from your canvas.

 

If you need to clip part of the Graphic you could apply a mask.

Another way to translate would be to loop over the points and changing their values..

 

The way Graphics work is:
Graphic objects hold only the points array and are then rendered directly on the stage canvas.

[codevinsky]

Sure... 

 

 

So I have a base class: Path.

 

This class has, amongst others, the following methods and properties:

var Path = function() {   ...  this.points = [];  this.coordinateSystem = Path.CoordinateSystems.WORLD;  ...}Path.CoorindateSystems = Object.freeze({  WORLD: 0, //points are relative to the world  SCREEN: 1, //points are relative to the screen  OFFSET: 2 // points are relative to the first point in the path});Path.prototype = {  ...  drawPath: function(graphics) {    // overly simplified draw function    this.points.forEach(function(point, index, points) {       if(index > 0) {         var prev = points[index-1];         graphics.moveTo(prev.x, prev.y);         graphics.lineTo(point.x, point.y);       }    }  }}

Seems simple enough, and for the -eventual- use case, it is.

 

However, I'm building an editor. 

 

The Editor Class looks something like:

var Editor = function() {  this.paths = [];  this.graphics = new PIXI.Graphics();}Editor.prototype = {  render: function() {    this.graphics.clear();    this.paths.forEach(function(path) {      ...      path.drawPath(this.graphics);    }  }}

Again, this works for the base case when the path's coordinate system is set to world.

 

 

When a path's coordinate system is set to offset, the first point in the path's x and y components are set to 0,0 and a world _origin property is added to the path.

 

Using canvas, the method would look like:

render: function() {  this.paths.forEach(function(path) {    ctx.save();    if(path.coordinateSystem === Path.CoordinateSystems.OFFSET) {      ctx.translate(path._origin.x, path._origin.y);    }    path.drawPath(ctx);    ctx.restore();  })} 

I attempted the following to mimic the behaviour I need:

Editor.prototype.render = function() {  this.paths.forEach(function(path) {    if(path.coordinateSystem === Phaser.Path.CoordinateSystems.OFFSET && path._origin) {        this.graphics.pivot = new PIXI.Point(-path._origin.x, -path._origin.y);        this.pivot = new PIXI.Point(path._origin.x, path._origin.y);    } else {        this.graphics.pivot = this.pivot;        this.pivot = new PIXI.Point(0,0);    }    p.drawPath(this.graphics);  }, this);}

The results were correct for a this.paths[] when only WORLD coordinates or only OFFSET coordinates were set. However, if the list contains both WORLD and OFFSET paths, the results were.... unexpected.

[Sebi]

The pivot is only the rotation point and doesn't affect the objects position. Or maybe it does for graphics? Im not sure.
 
But wouldn't the way to go be:
 

Path.prototype = {  ...  drawPath: function(graphics) {    // overly simplified draw function    this.points.forEach(function(point, index, points) {      if(index > 0) {        var prev = points[index-1];        graphics.moveTo(this._origin.x + prev.x, this._origin.y + prev.y);        graphics.lineTo(this._origin.x + point.x, this._origin.y + point.y);...

[codevinsky]

The drawPath method is, if you want to get more computer-sciency, protected. That is, it shouldn't be modified for this edge case.

[codevinsky]

The solution I've decided on is to fall back to canvas instead of using the graphics objects here. It's just debug output instead of something really important.