ProcessingJS 中的按键不起作用答案

【问题标题】：Key Pressing in ProcessingJS Doesn't WorkProcessingJS 中的按键不起作用
【发布时间】：2016-08-09 00:01:48
【问题描述】：

我有一个 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”按钮时没有任何反应。这是为什么呢？

【问题讨论】：

标签： javascript html processing embed processing.js

【解决方案1】：

这看起来不正确：

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

来自the Processing.js reference，应该是这样的：

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

我不确定您为什么要尝试比较代码中的 String 值，但它可能与 JavaScript not having a char datatype 有关：

JavaScript 只知道数字和字符串，而 Java 也知道“char”数据类型。 char 是一个 16 位无符号整数值，也可以伪装成一个字母（来自 ISO8859-1 代码页的前 256 个数字，之后基本上是魔法）。不幸的是，由于 JavaScript 没有等价物，依赖 char 比较是数字还是字母很可能会导致问题。如果您在比较字符的地方有处理代码，则必须使用 int() 和 str() 函数执行 int 强制转换或字符串强制转换，以便您知道您正在显式比较 JavaScript 可以处理的数据类型与。

但我认为您没有正确进行转换。您可以尝试使用 int() 或 str() 函数（同样，the reference 是您最好的朋友）。

【讨论】：

【解决方案2】：

所以我想通了！我在做的是我在写

keyPressed=fuction(){
   // CODE
};

但是，我应该一直在写：

void keyPressed(){
    // Code
}

【讨论】：

【解决方案3】：

默认情况下，处理画布必须用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>

【讨论】：