Question

我尝试使用CoffeeScript使用processing.js加载图像并编写这个简单的代码：

canvas1_proc = (ps) -> 
    ps.setup = ->
        ps.noLoop()
        ps.size(550, 400)
        @img = ps.loadImage('1.png')
    ps.draw = ->
        ps.image(@img, 0, 0)

$(document).ready () ->
    canvas1 = document.getElementById 'canvas-1'
    processing = new Processing(canvas1, canvas1_proc)

CoffeeScript代码被编译成代码

var canvas1_proc;
canvas1_proc = function(ps) {
  ps.setup = function() {
    ps.noLoop();
    ps.size(550, 400);
    return this.img = ps.loadImage('1.png');
  };
  return ps.draw = function() {
    return ps.image(this.img, 0, 0);
  };
};
$(document).ready(function() {
  var canvas1, processing;
  canvas1 = document.getElementById('canvas-1');
  return processing = new Processing(canvas1, canvas1_proc);
});

在js控制台中不显示图像且没有错误。我的错误在哪里？

Answer 1

是的，这是异步图像加载与处理在loadImage中的同步图像加载。您需要使用Processing.Sketch对象并使用js预加载图像，或者在draw（）中跳过帧，提前退出，直到@ img.loaded为真。

我在这里做的是创建一个Processing.Sketch对象，将代码作为函数传递。然后可以使用此Sketch对象设置各种选项，将图像添加到图像缓存等。我不知道CoffeeScript，所以这里是js方式：

canvas1_proc = function(ps) {
  ps.setup = function() {
    ps.noLoop();
    ps.size(550, 400);
    return this.img = ps.loadImage('1.png');
  };
  return ps.draw = function() {
    return ps.image(this.img, 0, 0);
  };
};

var sketch = new Processing.Sketch(canvas1_proc);
sketch.imageCache.add('1.png'); // will kick off a load in the background
var p = new Processing(canvas, sketch); // will wait for imageCache to be ready

我们等待启动草图，直到imageCache为空，然后当你调用loadImage（）之类的时候，我们首先尝试从缓存中取出（在这种情况下由URL键入，1.png）。

我会提交一个错误来更好地记录下来。同时，这里是Processing.Sketch对象的代码，它还包括对所有@pjs指令的访问：

https://github.com/humphd/processing-js/blob/1.2/processing.js#L19328

如果您需要更多帮助（huc on irc.mozilla.org/processing.js）或Twitter @humphd，请来irc与我聊天。也许你可以帮我写一些关于在CoffeeScript中使用Processing.js的内容，因为这些天有很多人在做这件事：）

Answer 2

David Humphrey的代码，移植到Coffeescript。像魅力一样：

canvas1_proc = (ps) ->
    ps.setup = () ->
        ps.noLoop()
        ps.size 550, 400
        this.img = ps.loadImage '1.png'

    ps.draw = () ->
        ps.image this.img, 0, 0

$(document).ready () ->
    sketch = new Processing.Sketch canvas1_proc
    sketch.imageCache.add '1.png'
    canvas1 = document.getElementById 'canvas-1'
    p = new Processing canvas1, sketch

Answer 3

所以，我不确定这里的最佳做法是什么，但问题是：在绘制图像之后正在加载图像。这是因为JS中的加载是异步的，并且如果通过Processing代码中的注释（在{{1}中与JS的编译分开处理）给出@pjs指令，则Processing只知道等待图像加载。 }）。

一个解决方法是使用回调到Processing.compile（它的第三个参数 - 前两个是图像名称和类型）来强制重绘。改变行

ps.loadImage

到

@img = ps.loadImage('1.png')

这样，您将获得一个初始@img = ps.loadImage '1', 'png', -> ps.draw()，然后在加载图像时获得另一个。

CoffeeScript + processing.js绘制图像失败

3 个答案: