在ProcessingJS中按键不工作

Key Pressing in ProcessingJS Doesn't Work

本文关键字：工作 ProcessingJS      更新时间：2023-09-26

我有一个ProcessingJS项目，我把它放在一个本地HTML页面上。这是代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<script src="https://raw.githubusercontent.com/processing-js/processing-js/v1.4.8/processing.min.js"></script>
<script type="text/processing" data-processing-target="processing-canvas">
size(400,400);
background(141,141,141);
keyPressed = function() {
        if(key+"" === "82" || key+"" === "114"){ // "r" or "R"
            text("Hi", 10,10);
        }
        return;   
};
</script>
<canvas id="processing-canvas"> </canvas>
</html>

由于某种原因，当我打开HTML页面时，我可以看到一切都在工作(就像我看到的灰色背景一样)，但是当我点击"r"或"r"按钮时什么都没有发生。为什么会这样?

这看起来不正确:

if(key+"" === "82" || key+"" === "114"){

从Processing.js引用中，应该是这样的:

if (key == 'r' || key == 'R') {

我不知道为什么你要在代码中比较String值，但它可能与JavaScript没有char数据类型有关:

JavaScript只知道数字和字符串，不像Java也知道"char"数据类型。该字符是一个16位无符号整数值，也可以假装是一个字母(来自ISO8859-1代码页的前256个数字，之后基本上是魔术)。不幸的是，由于JavaScript没有等效的，依赖于字符比较是数字还是字母很可能会导致问题。如果你有比较字符的Processing代码，你要么必须使用int()和str()函数执行int类型转换，要么执行字符串类型转换，这样你就知道你是在显式地比较JavaScript可以处理的数据类型。

但是我认为你做的转换不正确。您可以尝试使用int()或str()函数(再次，参考是您最好的朋友)代替。

我明白了!我写的是

keyPressed=fuction(){
   // CODE
};

然而，我应该写:

void keyPressed(){
    // Code
}

默认情况下，处理画布必须用java编写，如果你想用javascript编写，这是可能的一点额外的html:

    <head>
      <script src="processing.js"></script>
    </head>
    <body>
      <canvas id="canvas1 width="400" height="400"></canvas>
      <script id="script1" type="text/javascript">
        function sketchProc(processing) {
          //Code goes here
          processing.draw = function() {
            //This is the draw function
          }
        }
        var canvas = document.getElementById("canvas1");
        // attaching the sketchProc function to the canvas
        var p = new Processing(canvas, sketchProc);
        // p.exit(); to detach it
      </script>
    </body>
相关文章：