CoffeeScript + processing.js рисовать изображение не удается - PullRequest
Новая
       23

CoffeeScript + processing.js рисовать изображение не удается

1 голос
/ 26 мая 2011

Я пытаюсь загрузить изображение с processing.js, используя CoffeeScript, и пишу этот простой код: 

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. Где моя ошибка?

Ответы [ 3 ]

3 голосов
/ 27 мая 2011

Да, это асинхронная загрузка изображений по сравнению с обработкой синхронной загрузки изображений в 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

Поговорите со мной по irc, если вам нужно большепомощь (humm на irc.mozilla.org/processing.js) или в твиттере @humphd.Может быть, вы можете помочь мне написать что-то конкретное об использовании Processing.js с CoffeeScript, поскольку в наши дни это делают очень многие люди:)

2 голосов
/ 02 июня 2011

Код Дэвида Хамфри, портированный на 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
1 голос
/ 27 мая 2011

Итак, я не уверен, что здесь лучше, но вот проблема: изображение загружается после оно рисуется.Это связано с тем, что загрузка в JS является асинхронной, и Обработка знает, что ждать загрузки изображений можно только в том случае, если дана директива @pjs через комментарий в коде обработки (который обрабатывается отдельно от компиляции в JS в Processing.compile).1005 *

Одним из исправлений является использование обратного вызова для ps.loadImage (его третий аргумент - первые два - имя и тип изображения) для принудительной перерисовки.Измените строку 

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

на 

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

Таким образом, вы получите один начальный draw, а затем другой при загрузке изображения.

...