Question

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

更重要的是，我希望在拖动时更改窗口的大小并更改浏览器的大小

Answer 1

 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

Answer 2

以下是我使用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>

processing.js如何检测浏览器的大小？

2 个答案: