我正在构建一些使用processing.js处理从用户计算机拖动到canvas元素中的JPEG图像的东西。目前,它的工作原理是这样:Processing.js中的动态图像加载
canvas.addEventListener("dragenter", dragEnter, false);
canvas.addEventListener("dragexit", dragExit, false);
canvas.addEventListener("dragover", dragOver, false);
canvas.addEventListener("drop", drop, false);
...
function drop(evt) {
...
var files = evt.dataTransfer.files;
handleFiles(files);
}
function handleFiles(files) {
var file = files[0];
reader = new FileReader();
reader.onloadend = handleReaderLoadEnd;
reader.readAsDataURL(file);
}
function handleReaderLoadEnd(evt) {
var p=Processing.getInstanceById('canvas');
p.setImage(evt.target.result);
}
...在JS,那么在连接到画布(<canvas datasrc="/assets/draw.pjs" id="canvas" width="978" height="652">
)的.pjs脚本:
PImage imported_image;
void setImage(s) {
imported_image = requestImage(s , "" , image_loaded_callback());
}
所有工作正常为止。现在的问题:我会认为在图像准备好呈现时,会发生requestImage(或loadImage)的回调。但是,如果我这样做:
void image_loaded_callback() {
image(imported_image, 0, 0);
}
没有呈现。我可以通过等待10帧然后渲染来解决问题,但这似乎是一个非常丑陋(也许不可靠)的解决方案。有没有更好的方法来做到这一点? 任何帮助非常感谢!
''PImage imported_image;''。这是什么? JavaScript不是Java,没有静态类型。 – 2012-03-03 15:25:58
这部分在Processing.js中。请参阅http://processingjs.org/reference/PImage/ – BaronVonKaneHoffen 2012-03-04 19:50:12