gpt4 book ai didi

Node.js + 处理(.js)

转载 作者:搜寻专家 更新时间:2023-10-31 23:55:39 25 4
gpt4 key购买 nike

node.js 新手

我正在尝试与 processing 互动和 processing.js通过 node.js 失败。

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

我有一个这样的 sample.js:

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:

<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 文件:

// @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 更新为:

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;

事件 pde 似乎可以正确加载(200 OK 128 毫秒)但是当我尝试使用“doIT”按钮时出现此错误:“TypeError:processingInstance.myTest 不是函数 processingInstance.myTest(0.8,51.5);”

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

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

提前致谢。

最佳答案

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

<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 函数失败有几个原因,第一个通常是在初始化之前尝试访问草图实例。当草图的引用被添加到实例列表时,还有一个短暂的间隔,但它还没有完成绑定(bind)它的所有函数,所以这就是为什么你通常想要测试你要调用的函数。另一种方法是:

<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 毫秒安排尝试来表示引用。

关于Node.js + 处理(.js),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14682786/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com