CoffeeScript+processing.js 绘制图像失败

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为true。

我在这里要做的是创建一个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

我们等待启动 sketches 直到 imageCache 为空，然后当你调用loadImage() 等，我们首先尝试从缓存中提取内容（以 URL 为键，在本例中为 1.png）。

我将提交一个错误以更好地记录这一点。同时，这是Processing.Sketch对象的代码，其中还包括对所有@pjs指令的访问：

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

来 irc 上与我聊天如果您需要更多帮助（在 irc.mozilla.org/processing.js 上哼哼），或者在 Twitter @humphd 上。也许你可以帮我写一些专门关于将Processing.js与CoffeeScript结合使用的东西，因为现在很多人都在这样做:)

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 中的加载是异步的，如果通过处理代码中的注释给出 @pjs 指令，则处理只知道等待图像加载（与 JS 的编译分开处理） 处理.编译）。

一种修复方法是使用 ps.loadImage 的回调（其第三个参数 - 前两个是图像名称和类型）来强制重绘。将这一行更改

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

为

@img = ps.loadImage '1', 'png', -> ps.draw()

That way，您将获得一个初始draw，然后在加载图像时获得另一个。