プログラマのオッサンの唄: 2月 2014

左のように、ブラウザの縦スクロールが必要なほど長い Canvasを設定すると、マウスのY座標の現在位置がずれる。

具体的には、左のインナーフレームの任意の場所をクリックすると、クリックした場所を中心とした半径50pxの白丸が描かれる。

ところが、ブラウザを一番下まで縦スクロールさせた状態では、フレームの下の方をクリックしても白丸が表示されない。

マウスをかなり画面の上の方まで持って行ってからクリックをすると、ようやく白丸が表示されるが、現在地よりもかなり下の場所に表示されてしまう。

ブラウザ上では、スクロールした分だけ現在地が調整されているにも関わらず、Processing.js側では、単純に現在地にスクロールした分の距離が足されているようだ。

これはどうもChrome限定のバグのようで、FireFoxやInternetExplorerでは正常に表示されている。

Processing.jsのBug Trackerには既に同様のエラーが登録されているようなので、修正版のリリースを待ちたい。

Mouse position bug in Chrome 32.0.1700.102
http://processing-js.lighthouseapp.com/projects/41284/tickets/2066-mouse-position-bug-in-chrome-3201700102#ticket-2066-1

今回使用したテスト用のコードは下記のようになっている。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <script src="processing-1.4.1.js" type="text/javascript"></script>
    <script type="text/processing" data-processing-target="mycanvas">
    int selectedX = null;
    int selectedY = null;

    void setup() {
      frameRate(3);
      size(100, 1000);
    }
    void draw() {
      background(0);
      fill(255);

      if (selectedX != null && selectedY != null) {
        ellipse(selectedX, selectedY, 50, 50);
      }
    }
    void mousePressed() {
      selectedX = mouseX
      selectedY = mouseY
    }
    </script>
  </head>
  <body>
    <p>
    <canvas id="mycanvas"></canvas>
    </p>
  </body>
</html>

2014年2月2日日曜日

Processing.jsでマウスの現在位置がずれる(Chrome限定)