0

固定配置のフルスクリーン html5 キャンバスで実行されている Processing で構築されたフルスクリーンの背景を持つ Web ページを構築しています。このキャンバスの上に、期待どおりに表示されているいくつかの div を配置しています。Processing アニメーションは mouseX と mouseY のユーザー インタラクションに応答するため、jQuery の.mousemovex 変数と y 変数をスケッチに渡す必要がありました。Processing の mouseX と mouseY を使用すると、カーソルが div の上にあるたびにアニメーションが停止して問題が解決したためです。.mousemoveデスクトップ FF、Chrome、および Safari では問題なく動作しますが、iPad では、jQueryまたは ProcessingmouseXを使用しているかどうかに関係なく、div が表示されている場合、キャンバスに mouseX および mouseY 座標を認識させることができません。mouseY. すべての div を削除しようとしたところ、スケッチは期待どおりに機能しました。CSS も試してみましpointer-events:none;たが、うまくいきませんでした。もちろん、すべてのリンクも機能しなくなりました。誰でも助けることができますか？デスクトップではすべてがうまく機能するのに、iPad ではなぜこのようなことが起こるのでしょうか?

これは私のコードの例です：

HTML

<body>

<!-- Background P5 Canvas -->
<canvas id="p5can" data-processing-sources="noise/noise.pde"></canvas>

<header>

    <div id="name">XXXX</div>

    <div id="project-name">XXXX</div>

</header>

<div class="wrapper">

    <div id="disclaimer">XXXX</div>

    <div id="built"><a href="xxxx" href="_blank">xxxx</a></div>

    <div id="about-me-shooter">About me_</div>

    <div id="contact-me-shooter">Contact me_</div>

</div><!-- Wrapper -->

CSS

canvas {
position: fixed;
}

header {
position: fixed;
top: 25px;
left: 0;
width: 1120px;
height: 150px;
z-index: 10;
}

.wrapper {
width: 1208px;
position: absolute;
top: 0;
left: 0;
z-index: 9;
}

PDE ファイルの例

float t = 0;

void setup() {

  background(#bdbdbd);
  size(window.innerWidth, window.innerHeight);
  smooth();

}

void draw() {

  float x = mouseX;
  while (x < width) {
      line(x, mouseY * noise(x, t), x + 60, (mouseY + 60) * noise(x, t));
      x = x + 1;
  }

  t = t + 0.01;

}
4

1 に答える 1

0

解決策はとても簡単でした...見つけるのに何時間もかかりました! iPad の Chrome と Safari は、CSS で宣言されたキャンバス サイズを取得する必要があるようです。そうしないと、キャンバスの上に div を追加するときに機能しません。PDE ファイルでサイズを宣言しても問題ありません。したがって、キャンバスオブジェクトにwidth:100%andを追加すると、問題が解決しました。height:100%これが同じ問題を抱えている他の人に役立つことを願っています:)

于 2013-04-14T17:32:46.503 に答える