Canvas 咖啡脚本+；处理.js绘制图像失败

我尝试使用CoffeeScript加载带有processing.js的image，并编写以下简单代码：

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控制台中不显示图像，也没有错误。我的错误在哪里？

因此，我不确定这里的最佳实践是什么，但问题是：图像在绘制后被加载。这是因为在JS中加载是异步的，如果通过处理代码中的注释（这与在

Processing.compile

中编译到JS分开处理）给出

@pjs

指令，则处理只知道等待图像加载

一种修复方法是使用回调

ps.loadImage

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

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

到

---

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

绘制

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

因此，我不确定这里的最佳实践是什么，但问题是：图像在绘制后被加载。这是因为在JS中加载是异步的，如果通过处理代码中的注释（这与在

Processing.compile

中编译到JS分开处理）给出

@pjs

指令，则处理只知道等待图像加载

一种修复方法是使用回调

ps.loadImage

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

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

到

---

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

绘图

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

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

这里我要做的是创建一个Processing.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 canvas1_proc=功能（ps）{ ps.setup=函数（）{ p.noLoop（）； ps尺寸（550400）； 返回this.img=ps.loadImage（'1.png'）； }; 返回ps.draw=function（）{ 返回ps.image（this.img，0,0）； }; }; var sketch=新处理草图（canvas1_proc）； sketch.imageCache.add（'1.png'）；//将在后台启动一个负载 var p=新处理（画布、草图）；//将等待imageCache就绪 我们等待开始绘制草图，直到imageCache为空，然后在调用loadImage（）之类的函数时，我们首先尝试从该缓存中提取内容（在本例中由URL 1.png键控）

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

---

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

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

这里我要做的是创建一个Processing.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 canvas1_proc=功能（ps）{ ps.setup=函数（）{ p.noLoop（）； ps尺寸（550400）； 返回this.img=ps.loadImage（'1.png'）； }; 返回ps.draw=function（）{ 返回ps.image（this.img，0,0）； }; }; var sketch=新处理草图（canvas1_proc）； sketch.imageCache.add（'1.png'）；//将在后台启动一个负载 var p=新处理（画布、草图）；//将等待imageCache就绪 我们等待开始绘制草图，直到imageCache为空，然后在调用loadImage（）之类的函数时，我们首先尝试从该缓存中提取内容（在本例中由URL 1.png键控）

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

---

如果您需要更多帮助，请在irc上与我聊天（在irc.mozilla.org/processing.js上，或者在twitter@humphd上）。也许你可以帮我写一些关于将Processing.js与CoffeeScript结合使用的具体内容，因为现在有很多人都在这么做：）

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

---

大卫·汉弗莱的密码，移植到咖啡脚本。工作起来很有魅力：

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

---

如果您尝试执行除加载图像以外的操作，会发生什么情况？例如，如果您使绘图功能

ps.background（ps.frameCount）

，您会得到脉冲背景色还是什么都没有？是的，ps.background（ps.frameCount）工作正常需要使用指令

@pjs preload

加载图像。此指令不适用于coffeescript或js。我仍然没有找到没有此指令的加载方法。您确定这不是预加载问题吗？我尝试了这个方法，将Processing.js示例中的半色调点代码移植到coffeescript，效果很好。是的，它预加载了这个问题。但preload指令只对PJ有效，对咖啡无效。问题是如何在不使用任何指令的情况下仅使用CoffeScript或jsp预加载图像如果尝试执行除

loadImage

以外的操作会发生什么？例如，如果您使绘图功能

ps.background（ps.frameCount）

，您会得到脉冲背景色，还是什么都没有？是的，ps.background（ps.frameCount）工作正常需要使用指令

@pjs pr