8

如前所述，processing.js 如何响应浏览器的大小？（响应式设计）我尝试过 screen.width 和 screen.height 但效果不佳。它似乎只检测计算机屏幕大小的大小。

更重要的是，我想在拖动和更改浏览器大小时跟上窗口大小

4

2 回答 2

11 
 size(window.innerWidth, window.innerHeight);

根据https://groups.google.com/forum/?fromgroups=#!topic/processingjs/2-U_P7_BHlY

或者

void setup() {
size( $(window).width(),
    $(window).height() );
...
}

根据Get Viewport Width With JQuery and Use In Processing JS

于 2012-09-08T13:29:24.847 回答
3

以下是我使用 Zerb Foundation 3 响应式 Web 框架、Javascript、jQuery 和 Processing.js 解决此问题的方法。如果您想深入了解源代码，可以查看Living Map Project 。

在 javascript/jquery 中：

// handle page resizing
$(window).resize(function() {
var pjs = Processing.getInstanceById('livingmap');
pjs.resizeSketch(document.getElementById('div_p5canvas').offsetWidth,  document.getElementById('div_p5canvas').offsetHeight);
} );

在您的 .pde 处理 js 代码中（注意：使用 zurb 的基础 3、我定义的网格以及如何将其转换为像素，我觉得计算效果很好：

void resizeSketch(int w, int h) {
  if (w < 680) {
    size(w, floor(float(w)/680*610) - 30);
    } else size(680, 610 - 30);
}

在您的 html 中：

<div class="flex-video widescreen" id="div_p5canvas"
<canvas id="livingmap" data-processing-sources="livingmap_2.pde" style="height:auto; width:auto; focus { outline: 0; }" tabindex="1"></canvas>
</div>
于 2012-10-03T22:49:23.123 回答