Jump to content

Resolution when zooming with pixi-viewport


Recommended Posts

pixi.js version v5.3.10

I'm new to PIXI so please excuse me if I'm missing something obvious. I've googled, but couldn't make sense of anything I found and some posts were from 2017 so wasn't sure whether to trust them as current.

I'm writing and Angular app which has a workspace a bit like miro.  The user can drag cards around and zoom in and out.  

Problem: When zooming in the images and text on the cards degrades in quality. 

I assume this is because it's zooming in on the existing resolution and not updating the resolution as it zooms in.  I'm using PIXI.Texture to fill PIXI.Graphics objects for the cards.  The same occurs for sprites with texture fills too.

I've read that you can use the 'zoomed-end' event handler and then update the resolution, but when I do that the whole viewport gets bigger.

let scale: number = viewport.lastViewport.scaleX;
this.app.renderer.resolution = scale;
this.app.renderer.resize(this.canvasWidth, this.canvasHeight);

What is the best way to zoom without resolution loss please?

Thanks so much!

Link to comment
Share on other sites

if its not browser zoom:

text is degrading, yes, you have to change its scale & fontsize accordingly because there's no public PIXI Text based on canvas2d that resizes automatically. I have one in private repo, but still cant public it, well, because of 10 other my pixi plugins :)

if you need big zoom in, its possible to add SDF/MSDF to BitmapText with custom shader, but, again, I dont have it in public.

The way you proposed is performance hell, resolution is not made for that.

As for images - what's your exact problem? There are several and they depend on image size , whether its downscale or upscale, and several other things. I need to see what result do you have and what result do you want

Link to comment
Share on other sites

Hi, @Dougi
If you want doing something like this ( playground ) (this is MY DEMO and i prevent use it without notify me about usage), you should not use Text as fact. Because this require rebuild text shapes every time, and reallocate memory - super expensive operations.
You must use a MSDF text or shape-bassed text renderer, but this can be more complicated that use simple Text.

Edited by eXponeta
Link to comment
Share on other sites

Hi Guys

Thanks so much for getting back to me on this.  Greatly appreciated.  My apologies, I hadn't realised that I didn't mention that I'm using the pixi-viewport plugin.  So zooming is with the mouse wheel.  I've done a screencast to show a bit more of what the issue is.

Hopefully this is a little clearer, but please just let me know if not.

Thanks again so much!

Link to comment
Share on other sites

  • 2 weeks later...

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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...