Search the Community

I want to draw a polygon, for simplicity let's make it a triangle. var graphics = new PIXI.Graphics(); graphics.lineStyle(5, 0xFFFFFF, 1); graphics.moveTo(10, 10); graphics.lineTo(100, 10); graphics.lineTo(50, 100); graphics.lineTo(10, 10); container.addChild(graphics); The question is this: How is the best way to add a black shadow to both sides on the lines, so it is pure black just to the left and right of the line, then fades by alpha out to about 5 pixels either side of the line? Effectively I want a blurred black line of about 15 pixels (with a solid center which fades in alpha at the outer edges) with a solid white line of 5 pixels right in the middle of the black blurred line.

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

Just a FYI: Line drawing fails if you mix it with other graphics commands. The code snippet below will draw the circles but the lines vanish. Simple fix is to draw the lines then iterate again to draw the circles, but this combined drawing should work too. graphics.lineStyle(1, 0xffffff, 1); for (var i = 0; i < c.control.length; i++) { var x = control[i].x; var y = control[i].y; if (i == 0) { graphics.moveTo(x, y); } else { graphics.lineTo(x, y); } graphics.beginFill(0xafafaf); graphics.drawEllipse(x, y, 3, 3); graphics.endFill(); }