Problem 1: Calling lineTo in pixi. ticker cannot draw lines continuously

As shown, I need to dynamically draw a continuous route along the map.

But in the PIXI. The ticker or other clock (including: setInterval/PIXI ticker/requestAnimationFrame) call lineTo, only to find I had returned to the starting point of each drawing point of (0, 0).

It is possible to manually set moveTo to the corresponding starting point every time you call lineTo, but you will find that the line cannot connect when it turns.

Graphics.moveTo(fromPos.x, fromPos.y);
Graphics.lineTo(fromPos.x + deltX, fromPos.y + deltY)
Copy the code

positioning

This case occurs only within the clock loop, so it is suspected to be a scoped problem. Print the Graphics’ batchDirty and find that it is always -1 in synchronous and progressively updated in asynchronous.

solution

I haven’t found a way to keep batchDirty in the clock loop, but I think of two hack solutions:

One: Refresh all Graphics routes on each clock. So the Canvas doesn’t animate based on increments, it animates like a frame animation.

The implementation idea is like this demo: jsfiddle.net/ondkrc71/

ticker.add(() => {
    Graphics.clear()
    Graphics.drawNew()
})
Copy the code

Two: add a semicircle to the midpoint of each line segment transition.

Graphics. Methods like drawCircle (toPos. X, toPos. Y, 0.5);Copy the code

The pixi. ticker will cause the bound callback to be executed multiple times

This is caused by a code binding multiple times, requiring ticker.remove instead of ticker.stop to be called each time ticker is stopped.