Sign in to follow this  
Owlzy

Confusion with generateTexture and region argument

Recommended Posts

I'm trying to mask a photo and then capture the image.  But I don't want to capture some giant texture, just a small region around the mask. Here's a gif which shows the issue quite clearly (excuse the creepy face from this is not a person!). 

face.gif

 

This is the callback for the complete button

    _onComplete() {
        // reset visibility
        this._scaleSlider.visible = false;
        this._scalePanel.visible = false;
        this._photo.visible = false;
        this._photoPreview.alpha = 1;

        // capture masked photo
        const bounds = this._captureLayer.getLocalBounds(null, true);
        const bounds2 = this._photoMask.getLocalBounds(null, true);

        const maskedTexture = ENG.view.renderer.generateTexture(this._captureLayer, PIXI.SCALE_MODES.LINEAR, 1, bounds2);
        const maskedPhoto = new PIXI.Sprite(maskedTexture);
        maskedPhoto.anchor.set(0.5);
        this.addChild(maskedPhoto);

        // hide preview
        this._photoPreview.visible = false;
    }

 

I've tried just about any combination I can think of the for the region rect, including calculating the region manually.  But as the mask and photo are in the same container I was expecting to to be as easy as providing the mask bounds instead of the containers bounds. What am I missing here? 

I've also tried upgrading to latest dev (PixiJS 5.4.0-rc.3 ) just in case there was a bug fix I needed but that didn't help either. 

 

 

Share this post


Link to post
Share on other sites

That place was always buggy, and we fixed it many times. Maybe latest-latest dev ( pixijs.download/dev/pixi.js ) doesnt have this problem.

 

Usually i recommend to do everything by hand:

1. get localBounds
2. create renderTexture of specific size

3. move your element a bit that its left-top cornet is in (0,0)

4. use "renderer.render()" on it

This place is hell for years because of how several features conflict inside, especially "transform" param of "renderer.render" function,

Share this post


Link to post
Share on other sites

Ah thanks! I should have thought to just do it manually with a render texture, back in a world I understand now.  Here's the code using a RT if anyone runs into this in future.

 

    complete() {
        // reset visibility
        this._scaleSlider.visible = false;
        this._scalePanel.visible = false;
        this._photo.visible = false;
        this._photoPreview.alpha = 1;

        // create render texture
        const rt = PIXI.RenderTexture.create({width: this._photoMask.width, height: this._photoMask.height});

        // clear anchors
        this._photoPreview.anchor.set(0);
        this._photoMask.anchor.set(0);

        // offset photo to negate the anchor change
        this._photoPreview.x -= (this._photoPreview.width - this._photoMask.width) * 0.5;
        this._photoPreview.y -= (this._photoPreview.height - this._photoMask.height) * 0.5;

        ENG.view.renderer.render(this._captureLayer, rt);
        const maskedPhoto = new PIXI.Sprite(rt);
        maskedPhoto.anchor.set(0.5);
        this.addChild(maskedPhoto);

        // hide preview
        this._photoPreview.visible = false;
    }

 

Edited by Owlzy

Share this post


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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.