Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.08.2014, 01:44
Новичок на форуме
Отправить личное сообщение для putrsa Посмотреть профиль Найти все сообщения от putrsa
 
Регистрация: 21.03.2014
Сообщений: 8

Подгонка размера канваса после поворота на 90 градусов
В канвасе прямоугольный рисунок (ширина и высота не равны), ширина и высота канваса равна с шириной и высотой рисунка, если повернуть его на 90 градусов нижеприведенным кодом, то рисунок не вписывается в канвас. При изменении размеров канваса, контекст затирается. Как правильно подгонять canvas?
var cnvas=document.getElementById('WorkCanvas');
  var ctx = cnvas.getContext('2d');
  ctx.translate(cnvas.width/2,cnvas.height/2);
  ctx.rotate(Math.PI/2);
  ctx.drawImage(cnvas, -(cnvas.width/2), -(cnvas.height/2));
Ответить с цитированием
  #2 (permalink)  
Старый 25.08.2014, 17:47
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

может быть просто изображение из первого canvas перенести с поворотом на второй с другими размерами, а первый скрыть ?

пример http://learn.javascript.ru/play/Y13B4
Ответить с цитированием
  #3 (permalink)  
Старый 25.08.2014, 21:01
Новичок на форуме
Отправить личное сообщение для putrsa Посмотреть профиль Найти все сообщения от putrsa
 
Регистрация: 21.03.2014
Сообщений: 8

Спасибо, Ваш вариант работает (хотя не все понимаю - например почему ворочать контекст именно второго канваса, ладно, разберусь ), я подобный вариант пытался сделать (с транзитным канвасом), но что-то не пошло, пока что сделал так:
var cnvas=document.getElementById('WorkCanvas');
  var ctx = cnvas.getContext('2d');
  var btmap=ctx.getImageData(0, 0, cnvas.width, cnvas.height);
  var d = btmap.data;
  var stts= new Array (d.length);
  
  var kvostr=cnvas.height;
  var kvokol=cnvas.width;
  var allkvo=kvostr*kvokol;
  var nstr=1; //номер строки
  var nkol=0; //номер столбца
  var ff=0;
  
  for (var i=0;i<allkvo;i++)
  {
    ff=nstr*4*kvokol-nkol*4;
    gg=4*i;
   stts[gg+3] = d[ff];//d[ff]; 
   stts[gg+2] = d[ff-1]; 
   stts[gg+1] = d[ff-2]; 
   stts[gg] = d[ff-3]; 
   nstr++;
   if (nstr>kvostr) {nstr=1; nkol++};
  }
  var t=cnvas.height;
  cnvas.height=cnvas.width;
  cnvas.width=t; 
  var ctx = cnvas.getContext('2d');
  var btmap=ctx.getImageData(0, 0, cnvas.width, cnvas.height);
  var d = btmap.data;
  for( var i=0; i < stts.length; i++ ) d[i]=stts[i]; 
  ctx.putImageData(btmap, 0, 0);

нужно арифметику доработать, чтобы цвета не плыли и немного оптимизировать

Последний раз редактировалось putrsa, 25.08.2014 в 21:09. Причина: ошибся
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подгонка размера изображений к одному формату. Duda.Ml1986@gmail.com Оффтопик 4 02.08.2013 01:12
Ресайз окна в мобильном устройстве после поворота StrSprut Мобильный JavaScript 2 21.09.2012 12:32