Question

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

Answer 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代码页，之后基本上是魔术）。不幸的是，由于JavaScript没有等价物，依赖于字符比较可能是数字或字母很可能会导致问题。如果你有比较字符的处理代码，你将需要使用int（）和str（）函数执行int转换或字符串转换，这样你就知道你明确地比较了JavaScript可以处理的数据类型用。

但我认为你没有正确地进行转换。您可以尝试使用int()或str()功能（再次，the reference是您最好的朋友）。

Answer 2

所以我明白了！我在做的是我在写

keyPressed=fuction(){
   // CODE
};

但是，我应该写作：

void keyPressed(){
    // Code
}

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

ProcessingJS中的按键不起作用

3 个答案: