如何解决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
,然后在加载图像时得到另一个。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。