如前所述,怎么能processing.js到浏览器的尺寸回应? (响应式设计),我试过screen.width和screen.height但它没有很好地工作。 看来只有检测计算机的屏幕尺寸的大小。
更重要的是,我想拖时保持与窗口的大小步伐,改变浏览器的大小
如前所述,怎么能processing.js到浏览器的尺寸回应? (响应式设计),我试过screen.width和screen.height但它没有很好地工作。 看来只有检测计算机的屏幕尺寸的大小。
更重要的是,我想拖时保持与窗口的大小步伐,改变浏览器的大小
size(window.innerWidth, window.innerHeight);
根据https://groups.google.com/forum/?fromgroups=#!topic/processingjs/2-U_P7_BHlY
要么
void setup() {
size( $(window).width(),
$(window).height() );
...
}
根据获取视口宽度与jQuery和使用JS处理
这是我如何使用Zerb基金会3响应Web框架,使用Javascript,jQuery和Processing.js走近这个问题。 你可以看看活地图项目 ,如果你想通过源挖。
在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>