Загружаем информацию в canvas из базы данных!
Есть такая задача для построения мини-онлайн-фоторедактора:
нужно загрузить в canvas последовательно фото и текст из базы данных. Получается, но текст всегда оказывается ниже картинки. Как избежать этого? И вообще, как управлять слоями в canvas? |
Цитата:
Если в один и тот же канвас загрузить и текст и картинку то взаимным положением легко манипулировать |
Цитата:
Взаиморасположение текста и картинки зависит от того, что раньше выведите. |
Цитата:
Там просто координаты задаются и картинке и тексту |
Цитата:
|
Цитата:
картинка выводится ctx.drawImage(img, x, y) -x y rкоординаты Текст выводится ctx.fillText(text,x,y)-x y rкоординаты |
Была похожая проблема, правда я использовал либу fabric.js.
Так вот, у меня при инициализации загружалось в канвас некоторое количество картинок. По идее они должны были загружаться по порядку, то есть в каком порядке они пришли в json-е - в таком и должны быть на холсте. На деле - те картинки которые загружались быстрее в DOM - оказывались на холсте раньше и соответсвенно путались позиции. Проблему решил таким хаком - на страничке создал картинку размером 1 пиксель. И собственно ее и грузил вместо необходимых картинок на холст, то есть получалось объекты занимали позицию в порядке очередности, а уже потом менял изображения загруженных объектов. Скорее всего у вас похожая проблема - текст оказывается ниже - потому что картинка еще не загрузилась в dom. Решение: сначала загрузить картинки в dom, а потом уже загружать все в канвас, либо сделать как я, сначала грузить картинку которая уже есть на странице, а потом подменить на свою |
Цитата:
Цитата:
Правильно. Я буду делать fillText после drawImage. Координаты никак не относятся к проблеме, которую изложил ТС |
Цитата:
|
Цитата:
Цитата:
Судя по всему они там и есть |
Часовой пояс GMT +3, время: 21:32. |