coolblue Posted September 21, 2015 Share Posted September 21, 2015 I have a PIXI.Graphics object called lines to which I add lines using moveTo/lineTo and that works great.But, in my render loop, I refresh the lines by modifying lines.graphicsData.shape.points, but the rendered image of the line is not updated.Why is that?I would really like to draw a bunch of lines one time and thereafter, just adjust their geometry in the graphicsData array. I have an array of objects with a dynamic population (but not too dynamic) and time-varying (per tick) positions.I want to have a d3 style enter, exit, update and merge approach so I don't have to waste time clearing and re-drawing graphics elements every tick (they are lines in this case).The result I get is that the graphics are not updated. The Graphics object shares a container with another sub-container which has sprites in it. I tried setting things to dirty and various other things as shown in the following code...function updatePosition() { if(!lines.graphicsData.length) return; lines.graphicsData.forEach(function(g) { var d = g.__datum__; g.shape.points.forEach(function(p, i, a){ a[i] = [ d.x, d.y, d.x - d.v.x, d.y - d.v.y ][i]; }); //g.points = g.shape.points.concat(g.shape.points.slice(2)); // had no effect }); lines.dirty = lines.boundsDirty = lines.glDirty = true; lines.updateLocalBounds(); //lines.renderWebGL(renderer); // also had no effect }I'm seeing that the bound data and the GraphicsData.shape.points are updating as expected, but GraphicsData.points - which is added during the render - is not updated and the image rendered is also static.How can I force the graphicsData array to re-render?Here is a gist that demonstrates the issue.Here is a workaround but I'd rather understand why the first option fails... Quote Link to comment Share on other sites More sharing options...
coolblue Posted September 22, 2015 Author Share Posted September 22, 2015 There was another "dirty" flag that I didn't notice: clearDirty. This is set to true by Graphics.prototype.clear and setting it manually forced the redraw. The difference between my workaround and my base case was that i had to clear the object before redrawing. Bottom line: the Graphics object is only updated if it has been cleared. Quote Link to comment Share on other sites More sharing options...
xerver Posted September 27, 2015 Share Posted September 27, 2015 There was another "dirty" flag that I didn't notice: clearDirty. This is set to true by Graphics.prototype.clear and setting it manually forced the redraw. The difference between my workaround and my base case was that i had to clear the object before redrawing. Bottom line: the Graphics object is only updated if it has been cleared. Would you mind putting in an issue on GitHub? That sounds like we could make it better. Quote Link to comment Share on other sites More sharing options...
coolblue Posted September 27, 2015 Author Share Posted September 27, 2015 Yep, I'll do that... after I get my thoughts together... I'm still doing experiments to understand how this all works and I am formulating a few ideas about how to develop this object. It already has a nice, atomic structure: I like the graphicsData array and I'm experimenting with an API for that to expose interactive graphics elements (maybe it's a bit heavy for gaming? but I'm interested in data viz...). So anyway, I'll write something up when I come up for air. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.