Question

我目前在网站上使用Processing JS和HTML canvas元素。目的是让Processing JS运行在页面上HTML元素的顶部。该网站是[usandthings.com] [1]（通过查看网站我应该做的非常明显 - 擦掉黑色以显示白色背景，显示html文本）。然而，你可以看到它非常慢 - 当它没有超过任何html时它可以顺利运行，但是当你将它拖到文本上时，它非常慢并且不能真正起作用。无论如何我可以解决这个问题吗？

已编辑 - 这是显示我的意思的最简单方式：

<html>
<head>
    <meta charset="UTF-8">
    <title>Us and Things</title>
    <script src="processing.js"></script>
    <script type="text/javascript" src="jquery.js"></script>

<body>

<style> 
body {
height: 100%;
width: 100%;
overflow: hidden;
background: white;
}
p {
text-align: center;
position: absolute;
color: black;
width: auto;
font-size: 4em;
vertical-align: middle;
left: 0;
right: 0;
bottom: 0;
top: 10%;
}
</style>

<div class = "thecanvas">
<canvas id = "mycanvas"></canvas>
</div>

<p class = text>
TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE 
TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE
TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE 
TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE 
TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE
TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE 
TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE
</p>


<script type="text/processing" data-processing-target="mycanvas">


void setup() {
size(2000, 2000);
background(0);
frameRate(250);
}

void draw() {
stroke(255);
strokeWeight(130);
strokeCap(ROUND);
line(mouseX, mouseY, pmouseX, pmouseY);
}

void mousePressed() {
background(0);
}

</script>

</body>
</html>

Answer 1

这种情况正在发生，因为您的html 区块实际上是处理草图的在顶部（在前面）。

这导致阻止＆＃34;吸收＆＃34;鼠标事件，因此当您在html文本上方时，您的Processing sketch不会收到它们。换句话说，您的处理草图运行缓慢，它只是没有得到事件。

您可以使用CSS设置块和/或处理草图的z-index，以便处理草图位于html文本的顶部，但是您还必须设置您的处理草图为透明，然后使用像PGraphics这样的掩码。它可行，但需要对您的处理代码进行大修。

另一种选择是将块设置为不接收鼠标事件。您可以通过将此行添加到区块的CSS中来执行此操作：

pointer-events:none;

有了这些，鼠标事件将正确地落在＆＃34;加工草图。

在HTML元素的顶部处理JS？

1 个答案: