В p5.js очищают элементы в draw (), которые меняют каждый кадр, но оставляют дорогой элемент (карту), созданный в setup () - PullRequest
Новая
       15

В p5.js очищают элементы в draw (), которые меняют каждый кадр, но оставляют дорогой элемент (карту), созданный в setup ()

0 голосов
/ 10 октября 2018

Используя p5.js и d3.js для отображения, я загрузил карту США с конкретными округами в setup() на холсте.Загрузка занимает около 1/2 - 1 секунды, потому что шейп-файл довольно большой

В draw() я создаю текст, эллипсы и т. Д., Которые я хочу обновить с помощью ползунков, и, вероятно, создамнекоторая дополнительная анимация.

Обычно в p5.js вы можете просто использовать background(255) сразу после draw(), чтобы стереть все, и сделать переходы плавными, чтобы ничего не перекрывалось, старые эллипсы и текст не стирались,и т. д.

Проблема, с которой я столкнулся, заключается в том, что моя исходная карта слишком дорога для загрузки, я не могу стереть ее и перерисовать каждый кадр, он отстает от всех.Мне нужно нарисовать карту один раз, а затем по существу сделать фон (255) для всех других элементов, кроме карты, или в основном очистить все, что создано в draw () каждый кадр, оставляя карту, которую я создал в setup () нахолст.Или просто очистите все элементы, кроме карты.

Ниже приведен гипотетический код, который я сделал в редакторе p5.Прямоугольник на заднем плане является заполнителем для карты.Вы можете видеть, что, поскольку текст и эллипсы не стираются, они перекрываются, и как только эллипсы достигают определенного размера, вы не можете уменьшить их размер, потому что остаются большие.

https://editor.p5js.org/dfeusse/sketches/HkJe2Kj9m

Ниже приведен пример использования background(), который делает код p5.js идеальным и чистым, но созданный в настройке прямоугольник (т. Е. Карта), очевидно, стирается и исчезает.

https://editor.p5js.org/dfeusse/sketches/HJWtr5oqQ

Есть ли способ сохранить один элемент на холсте при рисовании поверх всех других элементов, например, концептуальное использование фона, очистка или какой-то другой метод, о котором я, очевидно, не знаю?Спасибо за любые мысли и помощь!

Ниже приведен скриншот, на котором вы можете увидеть карту, которую я рисую, в основном такую ​​же, как прямоугольник заполнителя, и пытающийся изменить эллипсы с помощью ползунков.enter image description here

1 Ответ

0 голосов
/ 10 октября 2018

У вас есть пара вариантов:

  • Если карта всегда одна и та же, вы можете сохранить ее в файл изображения.Загрузите его в переменную в функции setup(), а затем нарисуйте в функции draw().

  • Если карта может измениться между запусками вашей программы, вы можете нарисоватьотобразить карту в буфер в setup(), а затем нарисовать этот буфер в draw().Функция createGraphics() пригодится здесь.

Вот упрощенный пример: 

    var pg;

    function setup() {
      createCanvas(100, 100);
      pg = createGraphics(100, 100);
      pg.background(100);
      pg.noStroke();
      pg.ellipse(pg.width / 2, pg.height / 2, 50, 50);
    }

    function draw() {
      background(200);
      image(pg, 50, 50);
      image(pg, 0, 0, 50, 50);
    }
...