Sign in to follow this  
Eugenius

Change the style of line that is already drawn?

Recommended Posts

Hi guys

 

It's been a long time since working with Pixi.js. Since the version 1.6 is 'in da house' with the ability to fill up complex polygons, I resumed my project again.

 

As the title says, I draw thousands of lines on WebGL using Pixi.js Graphics class. Then I change the style of the lines.

 

For example, say I drew 1000 lines on the screen, then I want to update their styles (width, color and etc) somehow not by drawing them again.

 

Is there a way to achieve this? (possibly for polygons as well?)

Share this post


Link to post
Share on other sites

You could access the graphicsData property of your graphic.
 

The data it holds are all paths defined as:
{lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}
 

However pixi will always redraw the whole graphic (all 1000 lines) whenever you call the render function unless you have cached your graphic as a bitmap.

It's probably much easier to just discard the old graphics object and create a new one when you are changing something instead of fiddling around with the pathdata.

Share this post


Link to post
Share on other sites

Thanks Sebastian, I tried the way you suggested. However the graphicsData object doesn't seem to be associated with rendering but only bounds. 

 

Actually, I draw around 20000 vertices and draw (create) them all again and style needs to change, which means I have to do all the unnecessary moveto and lineto again. Would there a be a way to manipulate the graphicsData then draw from the array?

Share this post


Link to post
Share on other sites

Explored a little more and found Graphics.dirty and Graphics.clearDirty flags needs to be set true to update from graphicsData.

 

Here's my code

 

PIXI.Graphics.prototype.updateLineStyle = function(lineWidth, color, alpha){    // console.log('lineUpdate');    var len = this.graphicsData.length;    for (var i = 0; i < len; i++) {        var data = this.graphicsData[i];        if (data.lineWidth && lineWidth) {            data.lineWidth = lineWidth;        }        if (data.lineColor && color) {            data.lineColor = color;        }        if (data.alpha && alpha) {            data.alpha = alpha;        }        this.dirty = true;        this.clearDirty = true;    }    // return this;};

Thanks again Sebastian :)

Share this post


Link to post
Share on other sites

In case anyone is trying this in PIXI v4 things are a bit different. dirty and clearDirty are now numbers not booleans, so you have to increment them. Here is a little function you can use to change any of the props for a given graphic.

function updateGraphicProps(graphic, props) {
  const graphicsData = graphic.graphicsData;
  const keys = Object.keys(props);
  const jlen = keys.length;
  let i;
  let j;
  let ilen;
  let key;
  let shape;
  // Update the props on the graphic.
  for (j = 0; j < jlen; j++) {
    key = keys[j];
    graphic[key] = props[key];
  }
  // Update the props for each shape.
  for (i = 0, ilen = graphicsData.length; i < ilen; i++) {
    shape = graphicsData[i];
    for (j = 0; j < jlen; j++) {
      key = keys[j];
      shape[key] = props[key];
    }
  }
  graphic.dirty++;
  graphic.clearDirty++;
}

Here it is in action:

 

Share this post


Link to post
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.

Guest
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.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.