Jump to content

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

Hossam ahmed

Recommended Posts


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) {

        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) {

        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;
        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.lineStyle(mainAxisLineSize, PixiConstants.backgroundAxisColor);
        this.moveTo(startX, 0);
        this.lineTo(endX, 0);
        this.moveTo(0, startY);
        this.lineTo(0, endY);

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
                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 by Hossam ahmed
adding more pictures as output
Link to comment
Share on other sites

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 by ivan.popelyshev
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...