josescxavier

Members
  • Content Count

    12
  • Joined

  • Last visited

  1. I was creating a simple fiddle to replicate my problem but couldn't achieve the same result. After looking on my project again (on a higher resolution monitor) I noticed that there is something on the center of the screen after load the new texture. The problem is that I update the stage to fill the browser window size and during this process I update the size of the sprite to fill it too. I was scaling up a 1x1pixel sprite which result on a high scale value. After load the new texture I didn't reset the scale so the width and height values are scaled up using the past high scale value. Resize the sprite to fill the window will result in a tiny point on the screen. Example of output ( console.log( this.rx_image.width, this.rx_image.height, this.rx_image.scale.x ); ):
  2. One way I found to solve it is create a container and only create the sprice when get the texture uploaded: this.pixicanvas = new PIXI.Application({width: 600, height: 800}); this.rx_image = null; this.zoom_min = 1; this.aim_tmp = 0; this.state = { pixi_height: 0, pixi_width: 0, }; this.handleZoom = this.handleZoom.bind(this); this.container_rximage = new PIXI.Container(); this.container_points = new PIXI.Container(); this.pixicanvas.stage.addChild(this.container_rximage); this.pixicanvas.stage.addChild(this.container_points); and: updateRxSprite(new_img){ PIXI.loader.reset(); PIXI.loader.add('resource-key', new_img).load( (loader, resources) => { this.rx_image = new PIXI.Sprite(PIXI.Texture.fromImage('resource-key')); var scale = 1; var scale_screen = this.pixicanvas.screen.width; var scale_rx_image = this.rx_image.width; var aspect_ratio_sprite = this.rx_image.width/this.rx_image.height; var aspect_ratio_screen = this.pixicanvas.screen.width/this.pixicanvas.screen.height; if(aspect_ratio_sprite<=aspect_ratio_screen){ scale_screen = this.pixicanvas.screen.height; scale_rx_image = this.rx_image.height; } if(scale_screen > 0 && scale_rx_image > 0){ scale = scale_screen / scale_rx_image; } this.rx_image.scale.x = scale; this.rx_image.scale.y = scale; this.zoom_min = scale; this.rx_image.x = (this.pixicanvas.screen.width-this.rx_image.width)/2; this.rx_image.y = (this.pixicanvas.screen.height-this.rx_image.height)/2; this.rx_image.on('pointerdown', this.props.onClick); this.container_rximage.addChild(this.rx_image); this.d3zoom_element.on(".zoom", null); this.d3zoom_behavior = D3ZOOM.zoom().scaleExtent([this.zoom_min, 5]).on("zoom", this.handleZoom); this.d3zoom_element.call(this.d3zoom_behavior); var new_transform = D3ZOOM.zoomIdentity; new_transform.k = this.rx_image.scale.x; new_transform.x = this.rx_image.position.x; new_transform.y = this.rx_image.position.y; this.d3zoom_element.call(D3ZOOM.zoom().transform, new_transform); }); }
  3. Hi, I'm having a problem after setting a texture. It doesn't show up. It only show the new texture after modify it. Here is the code where I create the objects: this.pixicanvas = new PIXI.Application({width: 600, height: 800}); this.rx_image = null; this.zoom_min = 1; this.aim_tmp = 0; this.state = { pixi_height: 0, pixi_width: 0, }; this.handleZoom = this.handleZoom.bind(this); this.rx_image = new PIXI.Sprite(PIXI.Texture.EMPTY); this.container_points = new PIXI.Container(); Here where I update the texture: updateRxSprite(new_img){ PIXI.loader.reset(); PIXI.loader.add('resource-key', new_img).load( (loader, resources) => { this.rx_image.texture = PIXI.Texture.fromImage('resource-key'); var scale = 1; var scale_screen = this.pixicanvas.screen.width; var scale_rx_image = this.rx_image.width; var aspect_ratio_sprite = this.rx_image.width/this.rx_image.height; var aspect_ratio_screen = this.pixicanvas.screen.width/this.pixicanvas.screen.height; if(aspect_ratio_sprite<=aspect_ratio_screen){ scale_screen = this.pixicanvas.screen.height; scale_rx_image = this.rx_image.height; } if(scale_screen > 0 && scale_rx_image > 0){ scale = scale_screen / scale_rx_image; } this.rx_image.scale.x = scale; this.rx_image.scale.y = scale; this.zoom_min = scale; this.rx_image.x = (this.pixicanvas.screen.width-this.rx_image.width)/2; this.rx_image.y = (this.pixicanvas.screen.height-this.rx_image.height)/2; this.rx_image.on('pointerdown', this.props.onClick); this.d3zoom_element.on(".zoom", null); this.d3zoom_behavior = D3ZOOM.zoom().scaleExtent([this.zoom_min, 5]).on("zoom", this.handleZoom); this.d3zoom_element.call(this.d3zoom_behavior); var new_transform = D3ZOOM.zoomIdentity; new_transform.k = this.rx_image.scale.x; new_transform.x = this.rx_image.position.x; new_transform.y = this.rx_image.position.y; this.d3zoom_element.call(D3ZOOM.zoom().transform, new_transform); }); } After this code the new texture isn't showed up until I modify it, per example, set a new position to sprite. Before it stopped work I added the sprite to stage after set the new texture. Now because I need the sprite on a specific Z order I added the sprite with a EMPTY texture and only set the new texture after the user upload it. What I'm doing wrong?
  4. josescxavier

    Pixi and React

    Can you share you project?
  5. English is not my native language and I read it on the opposite way. Got it
  6. When start the drag action I remove the zoom handler until the drag stop and it works great
  7. Hi, My goal is to create a app where I can add points to an image. During the process I'll need to zoom in/out the image to accuratly place the points. Right now I can move the image(pink grid), zoom in/out, and the bunny maintain it's position on the grid. I can move the bunny clicking on it and it still works great. I was able to do most of it with the following code. However after add a container, (bunnies) I lost the onDragMove function on the bunny. I tried to set up a jsfiddle without success. When I try to drag the bunny the this.dragging variable is undefined. <!doctype html> <html> <head> <meta charset="utf-8"> <title>Hello World</title> </head> <body id='pixiCanvas'> <script src="pixi.js"></script> <script src="https://d3js.org/d3.v4.js"></script> <script type="text/javascript"> var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb}); document.body.appendChild(app.view); // create a texture from an image path var texture = PIXI.Texture.fromImage('assets/bunny.png'); var textureGrid = PIXI.Texture.fromImage('grid.png'); var bunny_x = 100; var bunny_y = 100; // Scale mode for pixelation texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST; var grid = new PIXI.Sprite(textureGrid); app.stage.addChild(grid); var zoom_handler = d3.zoom().scaleExtent([1, 8]).on("zoom", zoom_actions); function zoom_actions() { if(bunny.dragging == false){ console.log("zoom: ",bunny_x,bunny_y) grid.scale.set(d3.event.transform.k) grid.position.set(d3.event.transform.x,d3.event.transform.y) bunnies.scale.set(d3.event.transform.k) bunnies.position.set(d3.event.transform.x,d3.event.transform.y) } } var pixiCanvas = d3.select('#pixiCanvas'); pixiCanvas.call(zoom_handler); var bunny = new PIXI.Sprite(texture); bunny.interactive = true; bunny.buttonMode = true; bunny.anchor.set(0.5); bunny.scale.set(1); bunny.x = bunny_x; bunny.y = bunny_y; bunny .on('pointerdown', onDragStart) .on('pointerup', onDragEnd) .on('pointerupoutside', onDragEnd) .on('pointermove', onDragMove); bunny.click = function() { console.log("bunny.click"); this.x += 5; } var bunnies = new PIXI.Container(); bunnies.addChild(bunny); // add it to the stage app.stage.addChild(bunnies); function onDragStart(event) { console.log("onDragStart: ",bunny_x,bunny_y); this.data = event.data; this.alpha = 0.5; this.dragging = true; } function onDragEnd() { console.log("onDragEnd: ",bunny_x,bunny_y); this.alpha = 1; this.dragging = false; this.data = null; } function onDragMove() { console.log("onDragMove: ",bunny_x,bunny_y); if (this.dragging) { console.log("dragging: ",bunny_x,bunny_y); var newPosition = this.data.getLocalPosition(this.parent); this.x = newPosition.x; bunny_x = newPosition.x; this.y = newPosition.y; bunny_y = newPosition.y; } } </script> </body> </html> If you want to help me set up a jsfiddle here are all the links with the images: var texture = PIXI.Texture.fromImage('https://s26.postimg.org/heslqn655/bunny.png'); var textureGrid = PIXI.Texture.fromImage('https://s26.postimg.org/nr7r0h97d/grid.png');
  8. Look into the code I created a simple example: var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb}); document.body.appendChild(app.view); var bunny1 = new PIXI.Sprite.fromImage('required/assets/basics/bunny.png') bunny1.anchor.set(0.5); bunny1.scale.set(1); bunny1.x = 200; bunny1.y = 200; var bunny2 = new PIXI.Sprite.fromImage('required/assets/basics/bunny.png') bunny2.anchor.set(0.5); bunny2.scale.set(1); bunny2.x = 300; bunny2.y = 300; // add it to the stage app.stage.addChild(bunny1); app.stage.addChild(bunny2); console.log("bunny1:",bunny1.x,bunny1.y) console.log("bunny2:",bunny2.x,bunny2.y) console.log(bunny1.toLocal(bunny2.position)) bunny1 position on bunny2 frame shouldn't be (-100,-100)?
  9. I understand what you say here but I can't infer this from the documentation :S
  10. Hi, How do you take care of zoom? Can you point me in your code? Thank you
  11. I'm reading some tutorials about pixi.js and I can't understand the result I got from toLocal. I expect the result to be 100,100 however I got 200,200. Console output: bunny1: 100 100 bunny2: 200 200 200 200 Code: // create our little bunny friend..S var bunny = new PIXI.Sprite(texture); bunny.interactive = true; bunny.buttonMode = true; bunny.anchor.set(0.5); bunny.scale.set(1); bunny.x = 100; bunny.y = 100; // create our little bunny friend..S var bunny2 = new PIXI.Sprite(texture); bunny2.interactive = true; bunny2.buttonMode = true; bunny2.anchor.set(0.5); bunny2.scale.set(1); bunny2.x = 200; bunny2.y = 200; // add it to the stage app.stage.addChild(bunny); app.stage.addChild(bunny2); console.log("bunny1:",bunny.x,bunny.y) console.log("bunny2:",bunny2.x,bunny2.y) console.log(bunny.toLocal(bunny.position, bunny2).x,bunny.toLocal(bunny.position, bunny2).y)