Question

我正在构建一个网页，其中全屏幕背景使用Processing构建，正在固定定位的全屏html5画布上执行。在这个画布的顶部，我正在定位一些正在按预期显示的div。当我的Processing动画响应mouseX和mouseY用户交互时，我不得不将jQuery .mousemove x和y变量传递给我的草图，因为当我每次使用Processing的mouseX和mouseY时，光标都在div上，动画停止了这解决了我的问题。在桌面FF，Chrome和Safari上，它运行良好，但在iPad上，无论是否使用jQuery的.mousemove或Processing的{{}，我都无法使用画布来识别mouseX和mouseY坐标（如果显示div） 1}}和mouseX。我试图摆脱所有的div，草图按预期工作。我也尝试过使用CSS mouseY，但它没有用，当然，所有链接都停止了工作。有人可以帮忙吗？为什么在iPad上发生这种情况时，桌面上的一切都很棒？

这是我的代码示例：

HTML

pointer-events:none;

CSS

<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 -->

PDE文件示例

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;
}

Answer 1

解决方案非常简单......我需要花费数小时才能找到它！似乎Chrome＆amp; iPad上的Safari需要获得在CSS上声明的画布大小，否则在画布顶部添加div时它将无法工作。如果在PDE文件中声明大小，则无关紧要。因此，向画布对象添加width:100%和height:100%解决了我的问题。希望这可以帮助其他人遇到同样的问题：）

Processing.js画布上有一些div不能在iPad上运行

1 个答案: