有没有办法在保持像素大小的同时缩放 p5js 草图？

Question

I'm working on a project in p5.js where I need to be able to define obscure canvas sizes that are much bigger then my browser window. I essentially need to maintain a p5js pixel size (ex. 3840px, 1920px) but have the entire canvas in view. Think of how you can zoom in and out of a canvas in photoshop, thats the functionality I'm trying to achieve.

For now, zooming in and out with the default browser functionality is Okay but not ideal and causes some other errors with arrow key presses etc. I've looked all over processing, p5 and html canvas forums and can't seem to find my exact scenario.

Answer 1

There are a few ways you might approach this. In no particular order:

• Keep track of a zoom multiplier. Use this multiplier in all of your drawing code, for both coordinates and sizes. Change this multiplier when the user scrolls the mouse wheel or takes some other action.
• Use the scale() function to change the scale of the whole canvas.
• Use the createGraphics() function to create a drawing buffer. This buffer can be as large as you want it. Draw your scene to the large buffer, and then draw that buffer to your on-screen canvas.

Try to get something simple working, like a hard-coded circle and square. Then if you get stuck, you can post a MCVE with what you've tried. Good luck.

Answer 2

I had the opposite problem where I needed to scale a canvas of 260 x 130 up to 1080 by 720 while keeping the pixel density. I fixed this by having the following at the end of my setup() function:

 $("#defaultCanvas0").css({ 'height': "720px" });
 $("#defaultCanvas0").css({ 'width': "1080px" });

This meant the canvas was scaled up while still maintaining the low resolution. I found the usual scale() function did not work for me.

I know this wasn't what you were looking for at the time but maybe it'll help anyone else looking at this question in the future...