В настоящее время я использую CreateJS / EaselJS в своем приложении React.
У меня есть сценарий использования, когда мне нужно нарисовать много 1px by 1px прямоугольников на холсте (сцена).
Например, на холсте 500x500 у меня есть 250000 точек, чтобы заполнить этот холст.Немного на заднем плане, каждая точка - это объект, который имеет {posX, posY, color}.Цвет определяется по Data Normalization и Color Interpolation.Мой пример использования - цвет каждой точки будет меняться в зависимости от значения Range Slider.
Моя проблема - рисовать ~ 100000-150000 точек, время очень сложное, а производительность, которую я вижу, ужасна.Вот Stackblitz (Если Stackblitz не работает, перейдите в файл Stage.js и добавьте пробел где-нибудь, затем сохраните).Метод drawPoints() на Stage.js - это то, где я рисую точки и на каждом измененном значении ползунка я перерисовываю его.Насколько я понимаю, я не могу кешировать точку, которая была нарисована при изменении ее цвета.
Есть ли что-нибудь, что я могу сделать здесь, чтобы улучшить производительность?
- Ничья в партии?Так что мне не нужно перебирать большой массив Точек
- Многослойность?
Буду очень признателен за любые предложения.Спасибо