Fastest way to draw multiple lines

[georeith]

Hi, I'm building a vector drawing tool with PixiJS and have come across a bit of an issue.

The tool I am building allows you to draw shapes, polygons and curves which I am implementing using PIXI.Graphics.

All of these are able to have multiple fills and multiple strokes, the strokes can be of varying thickness and alignment.

For the fills I am drawing a single PIXI.Graphics and copying its geometry to other PIXI.Graphics, tinting or using it as mask for whatever the fill content is.

For the strokes I am stuck though as it seems I have to recreate from scratch the geometry each time (and by extension the PIXI.Graphics object too) just to alter the lineStyle?

Is there a faster way?

[ivan.popelyshev]

yep, change stuff in "graphics.geometry.graphicsData" and then call "graphics.geometry.invalidate()", pixi will rebuild vertex buffers on render.

Last thread on that: https://github.com/pixijs/pixi.js/issues/6529

Old thread:

https://www.pixiplayground.com/#/edit/LP7TfzH7XSAQ3G02WZ_Mb
https://www.pixiplayground.com/#/edit/JwIW3ToNCG1AYloElAoRm

26 July 2019

https://www.html5gamedevs.com/topic/9374-change-the-style-of-line-that-is-already-drawn/

 

[georeith]

@ivan.popelyshev thanks although thats not quite what I need. That updates an existing geometry but I need multiple lineStyles co-existing for the shape at the same time (stacked on top of each other):

 

It appears `PIXI.graphics.clone()` doesn't clone the geometry so I would still need to recreate the geometry each time even though the drawing commands aren't changing?
Effectively looking if there's a way to clone geometry so that I can just apply the technique you mentioned above to only modify its lineStyle but not affect the existing references.

Edited April 15, 2020 by georeith

[ivan.popelyshev]

19 minutes ago, georeith said:

@ivan.popelyshev thanks although thats not quite what I need. That updates an existing geometry but I need multiple lineStyles co-existing for the shape at the same time (stacked on top of each other):

It appears `PIXI.graphics.clone()` doesn't clone the geometry so I would still need to recreate the geometry each time even though the drawing commands aren't changing?
Effectively looking if there's a way to clone geometry so that I can just apply the technique you mentioned above to only modify its lineStyle but not affect the existing references.

OK, got it. No, there's no clone() for geometry.

I guess its time to clone pixijs repo, open it in separate IDE window, find classes with whatever shortcut your IDE has.

Yes, there are tasks like yours where simple Graphics isn't enough, you have to hack it.

You can override methods from outside, like "PIXI.GraphicsGeometry.xxx = function() { ... }" . No need to rebuild pixi.

 

[georeith]

function cloneGeometry(geometry) {
    const newGeometry = new GraphicsGeometry();
    newGeometry.graphicsData = geometry.graphicsData.map(graphicsData => {
        const newGraphicsData = graphicsData.clone();
        newGraphicsData.lineStyle = new LineStyle();
        newGraphicsData.fillStyle = new FillStyle();
        return newGraphicsData;
    });
    newGeometry.invalidate();
}

@ivan.popelyshev implemented it like above, thanks.

Edited April 15, 2020 by georeith

[ivan.popelyshev]

dont need to call invalidate on new(), invalidate just clears whatever pixi calculated.