Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Загружаем информацию в canvas из базы данных! (https://javascript.ru/forum/dom-window/28390-zagruzhaem-informaciyu-v-canvas-iz-bazy-dannykh.html)

nataLi-li 17.05.2012 17:27

Загружаем информацию в canvas из базы данных!
 
Есть такая задача для построения мини-онлайн-фоторедактора:
нужно загрузить в canvas последовательно фото и текст из базы данных. Получается, но текст всегда оказывается ниже картинки. Как избежать этого? И вообще, как управлять слоями в canvas?

vadim5june 17.05.2012 18:56

Цитата:

Сообщение от nataLi-li (Сообщение 174997)
Есть такая задача для построения мини-онлайн-фоторедактора:
нужно загрузить в canvas последовательно фото и текст из базы данных. Получается, но текст всегда оказывается ниже картинки. Как избежать этого? И вообще, как управлять слоями в canvas?

Все зависит от того как вы загружаете
Если в один и тот же канвас загрузить и текст и картинку то взаимным положением легко манипулировать

Раед 17.05.2012 19:43

Цитата:

Сообщение от nataLi-li
как управлять слоями в canvas?

Это вам не фотошоп, в канвазе слоёв нет.
Взаиморасположение текста и картинки зависит от того, что раньше выведите.

vadim5june 17.05.2012 20:01

Цитата:

Сообщение от Раед (Сообщение 175039)
Это вам не фотошоп, в канвазе слоёв нет.
Взаиморасположение текста и картинки зависит от того, что раньше выведите.

Там все равно что раньше выведем
Там просто координаты задаются и картинке и тексту

Раед 17.05.2012 20:09

Цитата:

Сообщение от vadim5june
Там все равно что раньше выведем
Там просто координаты задаются и картинке и тексту

Там картинка на текст накладывается, потому, что текст выводится раньше картинки. Координаты тут не причём

vadim5june 17.05.2012 20:13

Цитата:

Сообщение от Раед (Сообщение 175046)
Там картинка на текст накладывается, потому, что текст выводится раньше картинки. Координаты тут не причём

Ну вы наверно с кавасом не работали
картинка выводится
ctx.drawImage(img, x, y) -x y rкоординаты
Текст выводится
ctx.fillText(text,x,y)-x y rкоординаты

razerxxx 17.05.2012 20:15

Была похожая проблема, правда я использовал либу fabric.js.
Так вот, у меня при инициализации загружалось в канвас некоторое количество картинок. По идее они должны были загружаться по порядку, то есть в каком порядке они пришли в json-е - в таком и должны быть на холсте. На деле - те картинки которые загружались быстрее в DOM - оказывались на холсте раньше и соответсвенно путались позиции.
Проблему решил таким хаком - на страничке создал картинку размером 1 пиксель. И собственно ее и грузил вместо необходимых картинок на холст, то есть получалось объекты занимали позицию в порядке очередности, а уже потом менял изображения загруженных объектов.

Скорее всего у вас похожая проблема - текст оказывается ниже - потому что картинка еще не загрузилась в dom. Решение: сначала загрузить картинки в dom, а потом уже загружать все в канвас, либо сделать как я, сначала грузить картинку которая уже есть на странице, а потом подменить на свою

Раед 17.05.2012 20:18

Цитата:

Сообщение от vadim5june
Ну вы наверно с кавасом не работали

Работал
Цитата:

Сообщение от vadim5june
картинка выводится
ctx.drawImage(img, x, y) -x y rкоординаты
Текст выводится
ctx.fillText(text,x,y)-x y rкоординаты

И что? А если я хочу, чтобы у меня текст был поверх картинки?
Правильно. Я буду делать fillText после drawImage.
Координаты никак не относятся к проблеме, которую изложил ТС

vadim5june 17.05.2012 20:24

Цитата:

Сообщение от Раед (Сообщение 175049)
Я буду делать fillText после drawImage.
Координаты никак не относятся к проблеме, которую изложил ТС

Чтобы текст был поверх картинки нужно чтобы координаты текста были внутри картинки-я это имел ввиду

Раед 17.05.2012 20:28

Цитата:

Сообщение от vadim5june
Чтобы текст был поверх картинки нужно чтобы координаты текста были внутри картинки-я это имел ввиду

Цитата:

Сообщение от nataLi-li
Получается, но текст всегда оказывается ниже картинки.

vadim5june,
Судя по всему они там и есть


Часовой пояс GMT +3, время: 21:32.