Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.10.2020, 15:19
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Канва, отображение результата
На канве рисуются части изображения источника. У каждой такой части справа/снизу добавляется тиснение, срезаются уголки (правый верхний, нижний левый) на размер тиснения, затем она с тенью помещается на канву, то есть на это требуется N времени. Размеры канвы, а следовательно и результирующего изображения, рассчитывается по параметрам этих частей (количество, координаты, размеры), с добавлением величины зависящей от параметров тени.

Результат отображается в элементе на странице. Так как размеры конечного изображения могут быть различны, то оно определяется как фоновое изображение этого элемента с backgroundSize равным 'contain', чтобы центрировалось автоматически. Но так как каждая часть рисуется последовательно, то если результат отображать сразу, по мере отрисовки частей в канве, то на экране все будет "скакать". Поэтому отображается полностью созданное конечное изображение, по возвращению состояния promise.

Все нормально когда процесс запускается кнопкой "создать ...", но при изменениях параметров тиснения и тени (это поля range), даже учитывая то, что процесс запускается не по событию изменения в них, а по отпусканию кнопки мыши, видна смена изображения, сначала пропадает старое, затем появляется новое.

Как избавится от этого?
Ответить с цитированием
  #2 (permalink)  
Старый 22.10.2020, 15:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

laimas,
так может использовать второй(или виртуальный) слой и в нём рисовать, в выводить на верхний по готовности?
Ответить с цитированием
  #3 (permalink)  
Старый 22.10.2020, 16:36
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от рони
использовать второй(или виртуальный) слой и в нём рисовать
Да, так можно, только не слоем на странице, а через cssRules, так как при добавлении через element.style.backgroundImage, нужно указывать не только это, а все стили слоя, поэтому управляется через cssRules. Но боюсь, что и в этом случае могут быть "всполохи смены", так как ранее тема была - анимация фона, сделал ее также сменой свойств двух правил в cssRules, все нормально, но иногда бывает "вспышка", а причину так и не смог ни понять, ни отловить.

Мне так кажется, что если работать с данными канвы, даже если это по максимуму 1500х1000 ячеек, то было быстрее и нагляднее. Это PNG на выходе с прозрачным фоном, следовательно перед созданием канва очищается. Но можно очищать область в которой будет перерисовка в текущий момент. Бог его знает, как это будет выглядеть в реальности, но думаю быстрее чем создание тиснения через две канвы, с тенями внутренними и т.п. В этом случае, если изменяются параметры тиснения, то нужно перерисовать только их, если тень, то только ее с изменением размера всего изображения, но это только размер тени.

И хочется, и колется, но математикой заниматься не охота, да и времени нет пока.
Ответить с цитированием
  #4 (permalink)  
Старый 22.10.2020, 22:08
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

В общем это проблема FF, и никаким способом не получается ее решить. У всех на движке Chromium никаких проблем даже при изменениях параметров, правда есть задержка небольшая в реакции, но нет мерцания ни малейшего.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вывод результата в текстовом поле Remca Общие вопросы Javascript 0 02.05.2016 18:22
Отображение контента на IPAD mini и IPAD Pro sassem (X)HTML/CSS 0 24.02.2016 14:51
Преобразование из текстовых данных в красивое отображение материала AlexGraur Общие вопросы Javascript 0 08.08.2015 15:13
jquery-gp-gallery.js - разное отображение подгружаемых изображений frutality jQuery 1 09.09.2012 18:15
Неккоректное отображение jquery меню в Google Chrome и Opera Galyanov Opera, Safari и др. 6 25.01.2011 00:26