Jump to content

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


Recommended Posts

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.

Link to comment
Share on other sites




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.

Link to comment
Share on other sites

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);...
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...