Hossam ahmed

Members
  • Content Count

    1
  • Joined

  • Last visited

Everything posted by Hossam ahmed

  1. 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.