Some lines are missing or disappeared OnZoom (In/out)

[Hossam ahmed]

Hi, 

I'm new to PIXI.js and we just have upgraded our project (floor planning) from v4 to v5.2.0

We set the background to white, draw horizontal and vertical lines, two axis lines and the floor design itself and everything was working on v4 before the upgrade process.

the problem that not all lines are visible correctly, some lines disappear on zoom in and appear on zoom out.

here is the code for drawing the horizontal and vertical lines:

draw(keepCurrentGridSpacing?: boolean) {
        this.clear();
        this.removeChildren();

        let backgroundLineSize = this.stage.getPixiConstantBasedOnCurrentScale(PixiConstants.backgroundLineSize, PixiConstants.backgroundLineSizeMax, PixiConstants.backgroundLineSizeMin);
        let mainAxisLineSize = this.stage.getPixiConstantBasedOnCurrentScale(PixiConstants.backgroundAxisLineSize, PixiConstants.backgroundAxisLineSizeMax, PixiConstants.backgroundAxisLineSizeMin);

        if (!keepCurrentGridSpacing || keepCurrentGridSpacing.valueOf() === false) {
            this.updateBackgroundSquareSizeBasedOnScale();
        }

        let fromX = ((-1 * this.stage.position.x) / this.stage.scale.x);
        let toX = fromX + (this.stage.canvas.getCanvasParentWidth() / this.stage.scale.x);
        let fromY = ((-1 * this.stage.position.y) / this.stage.scale.y);
        let toY = fromY + (this.stage.canvas.getCanvasParentHeight() / this.stage.scale.y);

        let startX = (fromX - (2 * this.backgroundSquareSize)) - ((fromX) % this.backgroundSquareSize);
        let startY = (fromY - (2 * this.backgroundSquareSize)) - ((fromY) % this.backgroundSquareSize);

        let endX = toX;
        let endY = toY;
        let width = endX - startX;
        let height = endY - startY;
        this.beginFill(0xFFFFFF);
        var color: any = PixiConstants.backgroundColor;
        this.lineStyle(backgroundLineSize, color);
        this.drawRect(startX, startY, width, height);

        // Draw Horizontal and Vertical Lines
        var i: number;
        for (i = startY; i <= endY; i += this.backgroundSquareSize) {
            this.moveTo(startX, i);
            this.lineTo(endX, i);
        }
        for (i = startX; i <= endX; i += this.backgroundSquareSize) {
            this.moveTo(i, startY);
            this.lineTo(i, endY);
        }

        // Draw Axis
        this.beginFill(0xFFFFFF);
        this.lineStyle(mainAxisLineSize, PixiConstants.backgroundAxisColor);
        this.moveTo(startX, 0);
        this.lineTo(endX, 0);
        this.moveTo(0, startY);
        this.lineTo(0, endY);

        this.stage.animate();
    }

private updateBackgroundSquareSizeBasedOnScale(){
        let canvasWidth = this.stage.canvas.getCanvasParentWidth();
        let canvasHeight = this.stage.canvas.getCanvasParentHeight();
        let max = Math.max(canvasWidth / this.stage.scale.x, canvasHeight / this.stage.scale.y);
        let ratio = max / this.backgroundSquareSize;
        if (ratio < 10) {
            while (max / this.backgroundSquareSize < 10) {
                if (this.backgroundSquareSize == 100) {
                    // Smallest grid size allowed is 1 meter
                    break;
                }
                this.backgroundSquareSize /= 2;
            }
        } else if (ratio > 20) {
            while (max / this.backgroundSquareSize > 20) {
                this.backgroundSquareSize *= 2;
            }
        }
    }

i'm sure it would be a small issue but i can't find anyone to help me, appreciate your efforts.

 

Edited February 2, 2020 by Hossam ahmed
adding more pictures as output

[ivan.popelyshev]

We've changed so many things in Graphics internally, I don't know which one could affect you. First guess is https://github.com/pixijs/pixi.js/wiki/v5-Hacks#removing-65k-vertices-limitation , but I doubt you have 65k vertices here

You can either wait when we guess something , either give one of us access to the demo, either I either @eXponeta

And Welcome to the forums!

Edited February 3, 2020 by ivan.popelyshev