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 および Use In Processing JSに従って

于 2012-09-08T13:29:24.847 に答える
3

Zerb Foundation 3レスポンシブWebフレームワーク、Javascript、jQuery、Processing.jsを使用してこの問題にどのように取り組んだかを次に示します。ソースを掘り下げたい場合は、LivingMapProjectをご覧ください。

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 に答える