首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Node.js +处理(.js)

Node.js +处理(.js)
EN

Stack Overflow用户
提问于 2013-02-04 08:18:22
回答 1查看 2.7K关注 0票数 3

新到node.js

我试图通过正在处理中processing.js通过node.js进行交互,但没有成功。

--如果我将index.html直接打开浏览器,我的测试工作良好--,但是当我尝试使用节点(localhost上的节点sample.js :8080)时,activity.pde无法正确加载

我有一个这样的sample.js:

代码语言:javascript
复制
var http = require('http'),
    url = require('url'),
    fs = require('fs'),
    io = require('socket.io'),
    sys = require(process.binding('natives').util ? 'util' : 'sys');

send404 = function(res) {
    res.writeHead(404);
    res.write('404');
    res.end();
};

server = http.createServer(function(req, res) {
    // your normal server code
    var path = url.parse(req.url).pathname;
    switch(path) {
        //case '/json.js':
    case '/':
        fs.readFile(__dirname + "/index.html", function(err, data) {
            if(err) return send404(res);
            res.writeHead(200, {
                'Content-Type': path == 'json.js' ? 'text/javascript' : 'text/html'
            })
            res.write(data, 'utf8');
            res.end();
        });
        break;
    }
});
server.listen(8080);

// socket.io
var socket = io.listen(server);

一个简单的index.html:

代码语言:javascript
复制
<html>
  <head>
    <title></title>
  </head>
  <body>
  <script type="text/javascript" src="https://github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js"></script>
  <canvas id="pippo" data-processing-sources="activity.pde"></canvas>

  <script type="application/javascript">
  function doIT() {
    var processingInstance;
    processingInstance = Processing.getInstanceById('pippo');
    processingInstance.myTest(0.8,51.5);
    processingInstance.myTest(9.19,45.27);
  }
  </script>

  <button onclick="doIT();">doit</button>

</body>
</html>

还有一个简单的.pde文件,如这个:

代码语言:javascript
复制
// @pjs preload must be used to preload the image

/* @pjs preload="image.png"; */
PImage backgroundMap;

float mapScreenWidth,mapScreenHeight;  // Dimension of map in pixels.

void setup()
{
 size(600,350);
 smooth();
 noLoop();
 backgroundMap   = loadImage("image.png");
 mapScreenWidth  = width;
 mapScreenHeight = height;
}

void draw()
{
 image(backgroundMap,0,0,mapScreenWidth,mapScreenHeight);
}

void myTest(float a, float b) {
 ellipse(a,b,5,5);
}

如果我试图将我的sample.js更新为:

代码语言:javascript
复制
case '/':
fs.readFile(__dirname + "/index.html", function(err, data) {
    if(err) return send404(res);
    res.writeHead(200, {
        'Content-Type': path == 'json.js' ? 'text/javascript' : 'text/html'
    })
    res.write(data, 'utf8');
    res.end();
});
break;
case '/activity.pde':
fs.readFile(__dirname + "/activity.pde", function(err, data) {
    if(err) return send404(res);
    res.writeHead(200, {
        'Content-Type': 'plain/text'
    })
    res.write(data, 'utf8');
    res.end();
});
break;

activity似乎加载正确(200 OK 128 is ),但是当我尝试使用"doIT“按钮时,我得到了一个错误:"TypeError: processingInstance.myTest不是函数processingInstance.myTest(0.8,51.5);”

您对此设置有什么建议吗?

PS:此代码不使用节点,通过处理加载图像,并在按下按钮时在加载的图像上绘制一个椭圆。

提前谢谢。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-02-04 22:03:34

出于调试目的,您可能希望将doIT函数更改为:

代码语言:javascript
复制
<script type="application/javascript">
function doIT() {
  var processingInstance = Processing.getInstanceById('pippo');
  if(!processingInstance) {
    console.log("'pippo' instance not loaded (yet)");
    return;
  }
  if(!processingInstance.myTest) {
    console.log("'pippo' instance started loading, but hasn't completed yet");
    return;
  }
  // if we do get here, the instance should be ready to go.
  processingInstance.myTest(0.8,51.5);
  processingInstance.myTest(9.19,45.27);
}
</script>

您的doIT函数失败有几个原因,第一个原因通常是在初始化草图实例之前访问它。当草图的引用被添加到实例列表中时也有一个短暂的间隔,但是它还没有完成所有函数的绑定,所以这就是为什么您通常希望测试要调用的函数。另一种选择是:

代码语言:javascript
复制
<script type="application/javascript">
var pippoSketch = false;

(function bindSketch() {
  pippoSketch = Processing.getInstanceById('pippo');
  if(!pippoSketch || !pippoSketch.myTest) {
    setTimeout(bindSketch, 250); }
}());

function doIT() {
  if (!pippoSketch) {
    console.log("pippoSketch not ready yet.");
    return;
  }
  pippoSketch.myTest(0.8,51.5);
  pippoSketch.myTest(9.19,45.27);
}
</script>

这将尝试抓取对您的草图的一个完整的初始化引用,直到它通过每250 by安排一次尝试来表示引用为止。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/14682786

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档