HelloWorld123

Members
  • Content Count

    4
  • Joined

  • Last visited

  1. Nevermind i found out my mistake new PIXI.Rectangle(x,y,minWidth, minHeight) > new PIXI.Rectangle(0,0, minWidth, minHeight ) and should change position of the sprites to sprite.position.x = x and sprite.position.y = y
  2. var imageContainer = new PIXI.Container(); PIXI.loader.add("http://127.0.0.1:54508/resources/data/data.jpg").load(function(loader, resources){ var base = resources['http://127.0.0.1:54508/resources/data/data.jpg'].texture.baseTexture; var maxWidth = 2048; var maxHeight = 2048; for (var x = 0; x < base.width; x += maxWidth){ for (var y = 0; y < base.height; y += maxHeight){ var minWidth = Math.min(maxWidth, base.width - x); var minHeight = Math.min(maxHeight, base.height - y); var canvas = document.createElement('canvas'); canvas.width = minWidth; canvas.height = minHeight; canvas.getContext('2d').drawImage(base.source, -x, -y); var texture = new PIXI.Texture( PIXI.BaseTexture.fromCanvas(canvas), new PIXI.Rectangle(x, y, minWidth, minHeight) ); var sprite = new PIXI.Sprite(texture); imageContainer.addChild(sprite); } } viewport.addChild(imageContainer); }); This is a silly question but i'm banging my head for an hour and can't figure it out I'm trying to split an image into smaller texture chunks but i'm getting frame does not fit inside base texture dimensions and i'm not sure why this is happening The image height is 3106 and after the second iteration of the inner loop the y is 2048 and minWidth = 1058 so it should work there is not third iteration of the inner loop to give out of bounds error ... Thanks for reading . also i'm not familiar with ES6 yet, so don't judge
  3. Hello I'm building an app that will allow the user to draw different primitive shapes on the image ( circles, rectangle ... ) as well as scale and rotate them. The problem is in the size of the image. The images being used are around ( 25000 x 5000 px ) and its to high to load that into PIXI.TextureCache . The images won't have any interactivity to them except the zoom and pan functions. I'm looking for an efficient way how to do that . I was thinking maybe loading image on the separate off screen canvas and splitting it on smaller chunks that will be loaded into the Texture object, or maybe splitting images on the server and generating the spreed sheet of 512 x 512 px tiles. But i don't have a clue how to do that ( i do but it's a really small clue ) - How can i implement images this big ? - Should i choose different library for this ? ( I really like performance of pixi.js but if you have something in mind feel free to say ) I'm looking forward for your feedback, thanks for reading this and cheers .