Jump to content

New set texture doesn't show up


Recommended Posts

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?

Link to post
Share on other sites

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

    });
  }

 

Link to post
Share on other sites

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 ); ):

Quote

 

addChild: 1 1 1

Update: 914 914 914

Load new texture: 411300 411300 914

After resize: 1 1 0.0022222222222222222

 

 

Link to post
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.

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

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...