CoffeeScript + processing.js绘制图像失败

问题描述

| 我尝试使用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)

$(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);
  };
};
$(document).ready(function() {
  var canvas1,processing;
  canvas1 = document.getElementById(\'canvas-1\');
  return processing = new Processing(canvas1,canvas1_proc);
});

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

解决方法

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

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

    ,是的，这是异步图像加载与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）;     返回this.img = ps.loadImage（\'1.png \'）;   };   返回ps.draw = function（）{     返回ps.image（this.img，0，0）;   }; }; var sketch = new Processing.Sketch（canvas1_proc）; sketch.imageCache.add（\'1.png \'）; //将在后台启动负载 var p = new Processing（canvas，sketch）; //将等待imageCache准备就绪 我们等待开始绘制草图，直到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一起使用的东西，因为最近有很多人这样做：)     ,因此，我不确定这里的最佳做法是什么，但这是问题所在：在绘制图像之后加载图像。这是因为JS中的加载是异步的，并且如果通过Processing代码中的注释给出了

@pjs

指令（在

Processing.compile

中将编译与JS分开处理），则Processing只知道等待图像加载。 一种解决方法是使用回调到

ps.loadImage

（第三个参数，前两个参数是图像名称和类型）来强制重绘。换线

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

至

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

这样，您将获得一个初始的

draw

，然后在加载图像时得到另一个。