Использование loadImage Processing в JavaScript

Я использую API обработки, чтобы нарисовать изображение на холсте HTML, которое я могу использовать позже в коде. . Код JavaScript, который у меня есть:

var sketchProc = function(processingInstance) {
  with (processingInstance) {

    /* @pjs preload="images/hot-air.png" */

    size(innerWidth, innerHeight);
    var testImage = loadImage("images/hot-air.png");

    draw = function() {
      image(testImage, 0, 0, 500, 500);
    }
  }
}

var canvas = document.getElementById("canvas");
var processingInstance = new Processing(canvas, sketchProc);

Консоль говорит, что изображение имеет размеры 0x0. Я попытался выполнить загрузку с помощью директив Processing, но размер изображения по-прежнему равен 0x0. Однако, когда я вызываю loadImage() внутри цикла отрисовки, программа распознает размер изображения 512x512.

Я не хочу постоянно вызывать loadImage() внутри цикла отрисовки. Что я должен сделать, чтобы убедиться, что изображение правильно загружается вне цикла рисования?

Вы можете найти минимальный рабочий пример здесь.


javascript processing loadimage processing.js
person Daniel Hong    schedule 22.12.2017    source источник
comment
Ваш фрагмент кода неправильно отформатирован и показывает ошибку, когда я пытаюсь его запустить. Исправьте фрагмент кода, чтобы правильно включить Processing.js, или просто опубликуйте его как текст, а не как исполняемый фрагмент.   -  person Kevin Workman    schedule 22.12.2017
comment
Я отредактировал свой пост, чтобы показать, где я разместил директиву.   -  person Daniel Hong    schedule 22.12.2017

Ответы (1)


arrow_upward
1
arrow_downward

Во-первых, спасибо за публикацию MCVE, с которой мы можем поиграть.

Я считаю, что проблема в том, что по какой-то причине директива предварительной загрузки и, возможно, сама функция loadImage() не работают, когда вы пишете Код Processing.js только для JavaScript. Я тестировал это в различных редакторах и версиях Processing.js.

Таким образом, чтобы использовать функцию loadImage(), вы должны использовать чистый код обработки. Вот CodePen, показывающий, как это сделать:

<script type="application/processing">
    /* @pjs preload="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg"; */
    PImage testImage;

    void setup(){
      size(500, 500);
      testImage = loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg");
      println(testImage.height);
    }

    void draw() {
      background(100);
      image(testImage, 0, 0, 250, 250);
    }
</script>
<canvas> </canvas>

Просто для сравнения: здесь тот же код, использующий только синтаксис JavaScript. Это не работает.

Но сделаем шаг назад: если вам удобно использовать JavaScript, то почему вы используете Processing.js? Processing.js предназначен для разработчиков Processing (Java), которые хотят писать синтаксис Java, который автоматически преобразуется в JavaScript. На данный момент Processing.js довольно старый и больше не поддерживается.

Вместо этого я бы рекомендовал использовать P5.js. P5.js позволяет вам писать синтаксис JavaScript для создания скетчей обработки в Интернете. P5.js намного новее и все еще активно развивается.

Вот тот же код в P5.js:

var testImage;

function preload(){
  testImage =  loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg");
}

function setup() { 
  createCanvas(400, 400);
} 

function draw() { 
  background(100);
  image(testImage, 0, 0, 250, 250);
}

Бесстыдная самореклама: я написал учебник о различиях между Processing, Processing.js и P5.js, доступный здесь.

person Kevin Workman    schedule 22.12.2017
comment
@DanielHong Опубликуйте минимальный воспроизводимый пример, показывающий, что именно вы пробовали с помощью команды предварительной загрузки, чтобы мы могли скопировать и вставить его. чтобы запустить его самим. - person Kevin Workman; 22.12.2017
comment
Где я должен поместить команду предварительной загрузки? Я попытался поместить его в блок with и ничего не получил. Я подозреваю, что то, что предлагается в документации, работает только в Processing Sketchbook. - person Daniel Hong; 22.12.2017
comment
@DanielHong Это определенно работает и в браузере. Я предполагаю, что это симптом того, как вы оборачиваете свой код скетча в функцию. Если у вас есть CodePen или JSFiddle, я был бы рад поиграть с ними. - person Kevin Workman; 22.12.2017
comment
Спасибо за вашу готовность помочь! Посмотрю, что я могу сделать. Вы согласны, если я выложу весь свой проект или вы предпочтете минимальный рабочий пример? - person Daniel Hong; 22.12.2017
comment
@DanielHong Если это вообще возможно, вы должны попытаться собрать минимальный пример, который показывает поведение, которое вы видите, в как можно меньшем количестве строк. Но пример должен быть достаточно полным, чтобы показать проблему. - person Kevin Workman; 22.12.2017
comment
Я опубликую свой код где-нибудь в открытом доступе и свяжу с ним вас и других посетителей, как только я это сделаю. - person Daniel Hong; 22.12.2017
comment
Вы можете найти MWE по адресу repl.it/@DanielHong/Testing-ProcessingJS. Я также помещу это в исходный пост, чтобы другие посетители могли это увидеть. - person Daniel Hong; 22.12.2017
comment
Мне очень нравится ваше решение. Я предпочитаю писать чистый код обработки, поэтому воспользуюсь вашим решением. Я написал JavaScript, потому что чувствовал, что он будет более совместим с Интернетом. Я очень ценю ваше время на изучение этого. - person Daniel Hong; 23.12.2017
comment
@DanielHong Бесстыдная самореклама: я написал учебник о различиях между Processing, Processing.js и P5.js, доступный здесь. - person Kevin Workman; 23.12.2017