如何缩放比屏幕尺寸大的 Processing 草图
Q:
如果 size() 方法设置的尺寸比电脑分辨率大,怎么才能看到屏幕以外的部分呢?
A:
Processing 虽然有一个 Presentation Mode,但是实际上它没有自己缩放的功能。所以说,我们只能靠自己在绘图过程中进行缩放。
目前可以想到的方法有以下两种:
0x00 一种方法是使用 scale()
函数
需要在 draw() 函数里面第一行就加上 scale()
方法。
具体使用方法见 scale() reference
0x01 另一种方法是使用 PGraphics
- 绘图时,新建一个
PGraphics
图层 - 将所有图形按照你需要的原始尺寸绘制在这个图层上(使用方法:PGraphics reference)
- 最后使用
PGraphics
对象的image(pgraphic, 0, 0, your_width, your_height)
方法把图像缩放为你屏幕的大小。
一个示例
没有缩放的代码:
void setup() { size(2000, 1000); // 创建一个2000x1000的草图 } void draw() { fill(255); noStroke(); rect(500, 100, 1000, 500); fill(0); rect(0, 200, width, 100); noFill(); strokeWeight(2); stroke(255,0,0); rect(0, 0, width, height); }
由于我的屏幕分辨率是1280x800,运行后显示不全:
按照第一种方法修改:
void setup() { size(2000, 1000); // 创建一个2000x1000的草图 } void draw() { scale(1280/2000.0); // 因为我的屏幕分辨率是1280x800,所以除一下得到比例数值 fill(255); noStroke(); rect(500, 100, 1000, 500); fill(0); rect(0, 200, width, 100); noFill(); strokeWeight(2); stroke(255,0,0); rect(0, 0, width, height); }
窗口依然是2000x1000,但是图像缩小到1280宽度了:
按照第二种方法修改:
PGraphics graphic; // 新建一个PG图层 void setup() { fullScreen(); // 创建一个全屏的草图,相当于:size(你屏幕宽度, 你屏幕高度) graphic = createGraphics(2000, 1000); // 你需要的尺寸的图层 } void draw() { graphic.beginDraw(); graphic.fill(255); graphic.noStroke(); graphic.rect(500, 100, 1000, 500); graphic.fill(0); graphic.rect(0, 200, graphic.width, 100); graphic.noFill(); graphic.strokeWeight(2); graphic.stroke(255,0,0); graphic.rect(0, 0, graphic.width, graphic.height); graphic.endDraw(); image(graphic, 0, 0, 1280, 640); // 我的屏幕分辨率是1280x800,所以将2000x1000的草图等比例缩放到1280x640,你可以根据你的需要更改这两个参数
效果如下:
最后总结:这两种方法都是直接把图像缩小,而不只是缩放预览效果,只能用来临时看图像的效果,无论哪种都比较低效,所以建议还是尽量避免这种情况的发生。
Tech Note
Processing
Creative Coding
创意编程
分辨率