Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.08.2011, 15:28
Профессор
Посмотреть профиль Найти все сообщения от Solovei95
 
Регистрация: 15.03.2011
Сообщений: 353

Удалено (больше нету)
Я удалил тему!

Последний раз редактировалось Solovei95, 26.08.2011 в 09:44.
Ответить с цитированием
  #2 (permalink)  
Старый 23.08.2011, 15:42
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

А зачем оно нужно если можно работать с png спрайтом? Фотошоп не умеет в APNG сохранять, без JavaScript не работает, в чем плюсы тогда, кому нужен этот формат?
Ответить с цитированием
  #3 (permalink)  
Старый 23.08.2011, 16:18
Профессор
Посмотреть профиль Найти все сообщения от Solovei95
 
Регистрация: 15.03.2011
Сообщений: 353

Вы можете использовать движок для отображении анимации!
https://github.com/Solovei95/apngjng.../imagetools.js
var anim = new Animation();
anim.offsetX = 0;
anim.offsetY = 0;
anim.blend_op = 0;
anim.dispose_op = 0;
anim.delay = 1000;
anim.addFrame(element1);
anim.addFrame(element2);
anim.addFrame(element3);
anim.animate();
Ответить с цитированием
  #4 (permalink)  
Старый 23.08.2011, 20:04
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Сообщение от Solovei95
anim.addFrame(element1);
anim.addFrame(element2);
anim.addFrame(element3);
Это разные изображения? А со спрайтами как быть?

Ну и все таки зачем столько усилий для APNG?
Ответить с цитированием
  #5 (permalink)  
Старый 23.08.2011, 20:23
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от Octane
Ну и все таки зачем столько усилий для APNG?
Видимо человеку от безделья заняться нечем =)
Ответить с цитированием
  #6 (permalink)  
Старый 24.08.2011, 06:30
Профессор
Посмотреть профиль Найти все сообщения от Solovei95
 
Регистрация: 15.03.2011
Сообщений: 353

Для спрайтов есть парсер!
https://github.com/Solovei95/apngjng.../imagetools.js

var big = new Image();
big.src = "image.jpg";
big.onload = function(){
var imgs = parseSprite(big,{
row:2,
cell:2,
width:100,
height:100,
sizeMode:0,
paddingLeft:0,
paddingTop:0
});
}

Режем:
Таблица 2х2, размер кусков 100х100, сдвиг таблицы 0х0

Так что тупо:
ctx.drawImage(imgs[0],0,0);
ctx.drawImage(imgs[1],100,0);
ctx.drawImage(imgs[2],0,100);
ctx.drawImage(imgs[3],100,100);

Все куски являются Canvas элементами, но их можно рисовать в drawImage.

Если сделать sizeMode:1 то размер кусков будет зависить от размера самой таблицы
Если sizeMode:0 то размер таблицы зависит от размера кусков

Последний раз редактировалось Solovei95, 24.08.2011 в 06:35.
Ответить с цитированием
  #7 (permalink)  
Старый 24.08.2011, 06:31
Профессор
Посмотреть профиль Найти все сообщения от Solovei95
 
Регистрация: 15.03.2011
Сообщений: 353

Так что пинаем!
Есть также функция для маски и конверта картинки:
imageMask(canvas,img_elem1,img_elem2);
convertImage(canvas,img_elem1);

Последний раз редактировалось Solovei95, 24.08.2011 в 06:39.
Ответить с цитированием
  #8 (permalink)  
Старый 24.08.2011, 06:41
Профессор
Посмотреть профиль Найти все сообщения от Solovei95
 
Регистрация: 15.03.2011
Сообщений: 353

По аналогии:

var big = new Image();
big.src = "image.jpg";
big.onload = function(){
var imgs = parseSprite(big,{
row:2,
cell:2,
width:100,
height:100,
sizeMode:0,
paddingLeft:0,
paddingTop:0
});

var anim = new Animation();
...
anim.addFrame(imgs[0]);
anim.addFrame(imgs[1]);
anim.addFrame(imgs[2]);
anim.addFrame(imgs[3]);
anim.animate();
}
Ответить с цитированием
  #9 (permalink)  
Старый 24.08.2011, 06:43
Профессор
Посмотреть профиль Найти все сообщения от Solovei95
 
Регистрация: 15.03.2011
Сообщений: 353

"Норвежские биотлонисты"
Ответить с цитированием
  #10 (permalink)  
Старый 24.08.2011, 10:59
Профессор
Посмотреть профиль Найти все сообщения от Solovei95
 
Регистрация: 15.03.2011
Сообщений: 353

Я вам расскажу один секрет!
Canvas это тот же IMG элемент. Только IMG имеет картинку с определенного URL аддреса, и ее нужно подгружать!
Canvas же напротив - его можно использовать без URL аддреса, не нужно подгружать!
Ответить с цитированием
Ответ



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

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