Clear canvas and redraw it when data change using PIXI.js

Question

I'm new in PIXI.js and my question is likely to be very basic but I still haven't find a solution. In my project in Vue I use PIXI to animate huge amount of objects moving along paths:

data() {
    return {
        app: new PIXI.Application({
            width: 800,
            height: 600,
            transparent: true
        }),
        currentYear: 2021,
        // ...other data...
    }
},
mounted() {
    this.width = d3.select(this.$refs.container).node().getBoundingClientRect().width
    this.height = d3.select(this.$refs.container).node().getBoundingClientRect().height
    this.visualizeStuff()
},
methods: {
    visualizeStuff() {
        this.$el.appendChild(this.app.view)
        this.app.renderer.resize(this.width, this.height)

        // ...some code where I filter the dataset using this.currentYear...
        for (let i = 0; i < filteredData.length; i++) {
            // ...some code...
            let path = new PIXI.Graphics()
                path.lineStyle(1, 0xff0000, 0)
                this.pathGenerator(filteredData[i].geometry, path)
                path.endFill()
                this.app.stage.addChild(path)

            let items = []                
            let item = PIXI.Sprite.from(require("images/item.png"))
                items.push(plane)
                this.app.stage.addChild(item)
            // ...visualize items along paths using GSAP...
        }
    },
    // ...other methods...
}

Everything works fine, the problem appears when some prop changes and I have to filter data and redraw visualization. And here the question is: how to do it? Now the new objects based on newly filtered data are adding up to previously existed

watch: {
    params: function(newVal, oldVal) {
        if (newVal.someValue == this.target) {
            this.currentYear = newVal.year
            // I guess next I have to clear the canvas somehow
            // I tried this.app.renderer.destroy(true),
            // this.app.renderer.clean(0, 0), but haven't succeeded
            this.visualizeStuff()
        }
    }
}

The additional question is whether it possible to set a transition here? Lets say remove objects based on the old data changing their opacity to 0 during a split second and draw the new objects the same way changing opacity from 0 to 1

Answer 1

If you want to clear a Pixi.Graphics object, you can use the clear function.

So in your case, you seem to have it called path , so it would be:

path.clear();

You will obviously have to have some way to iterate over the paths.