Канва, отображение результата
На канве рисуются части изображения источника. У каждой такой части справа/снизу добавляется тиснение, срезаются уголки (правый верхний, нижний левый) на размер тиснения, затем она с тенью помещается на канву, то есть на это требуется N времени. Размеры канвы, а следовательно и результирующего изображения, рассчитывается по параметрам этих частей (количество, координаты, размеры), с добавлением величины зависящей от параметров тени.
Результат отображается в элементе на странице. Так как размеры конечного изображения могут быть различны, то оно определяется как фоновое изображение этого элемента с backgroundSize равным 'contain', чтобы центрировалось автоматически. Но так как каждая часть рисуется последовательно, то если результат отображать сразу, по мере отрисовки частей в канве, то на экране все будет "скакать". Поэтому отображается полностью созданное конечное изображение, по возвращению состояния promise. Все нормально когда процесс запускается кнопкой "создать ...", но при изменениях параметров тиснения и тени (это поля range), даже учитывая то, что процесс запускается не по событию изменения в них, а по отпусканию кнопки мыши, видна смена изображения, сначала пропадает старое, затем появляется новое. Как избавится от этого? |
laimas,
так может использовать второй(или виртуальный) слой и в нём рисовать, в выводить на верхний по готовности? |
Цитата:
Мне так кажется, что если работать с данными канвы, даже если это по максимуму 1500х1000 ячеек, то было быстрее и нагляднее. Это PNG на выходе с прозрачным фоном, следовательно перед созданием канва очищается. Но можно очищать область в которой будет перерисовка в текущий момент. Бог его знает, как это будет выглядеть в реальности, но думаю быстрее чем создание тиснения через две канвы, с тенями внутренними и т.п. В этом случае, если изменяются параметры тиснения, то нужно перерисовать только их, если тень, то только ее с изменением размера всего изображения, но это только размер тени. И хочется, и колется, но математикой заниматься не охота, да и времени нет пока. :) |
В общем это проблема FF, и никаким способом не получается ее решить. У всех на движке Chromium никаких проблем даже при изменениях параметров, правда есть задержка небольшая в реакции, но нет мерцания ни малейшего.
|
Часовой пояс GMT +3, время: 06:55. |