canvas rotate center
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head></head>
<body>
<canvas id="ci" width="80" height="80"></canvas>
<script>
function CanvasCenter(){
var i = new Image();
i.onload = function(){
var dl = i.width;
var c = document.getElementById("ci").getContext("2d");
c.drawImage(i, 0, 0, dl, dl);
var beta = -3; //угол поворота, если минус то против часовой
var beta = (beta*Math.PI)/360;
var l = (Math.sqrt(dl*dl+dl*dl))/2;
var gam = Math.PI - ((Math.PI - (beta * Math.PI)/360)/2) - (Math.PI/4);
var b = 2*l*Math.sin(beta/2);
setTimeout(function(){
c.clearRect(0,0,dl,dl);
var x = b*Math.sin(gam);
var y = b*Math.cos(gam);
c.translate(x,-y);
c.rotate(beta);
c.drawImage(i, 0, 0, dl, dl);
c.restore();
setTimeout(arguments.callee,10);
},0);
}
i.src = "http://javascript.ru/forum/image.php?u=11&dateline=1273676600";
}
CanvasCenter();
</script>
</body></html>
Наклепал тут небольшой код по вращению фотки вокруг своего центра на canvas. Сразу вопрос, т.к. это первый мой код связанный с canvas, нет ли решения по проще, например указания точки смещения центра? Если нет то просьба тыкать во все узкие места скрипта. Ну а остальным просто дарю :) |
rotate — зло, оси трогать не надо, лучше использовать трансформацию
|
о боже, как же мне это надо было, хотя, всё таки точка смещения нужна бы была бы, но ничё и так придумаем как без неё)
|
Цитата:
Точку смещения можно легко указать: c.drawImage(i, 0, 0, dl, dl); c.drawImage(i, 30, 30, dl, dl); //30 относительно центра Однако по совету Octane я перепишу этот скрипт, думаю что он прав, а вообще я скрипт почти не тестировал, ни на скорость ни на баги :) |
Цитата:
разъясни пожалуйста что ты имел в виду, я чего-то не понимаю или не догоняю? хоть намекни Я не учил в школе матрицы. У меня получается точно такой же скрипт. С почти незначительным изменением.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head></head>
<body>
<canvas id="ci" width="80" height="80"></canvas>
<script>
function CanvasCenter(){
var i = new Image();
i.onload = function(){
var dl = i.width;
var c = document.getElementById("ci").getContext("2d");
c.drawImage(i, 0, 0, dl, dl);
var beta = -3; //угол поворота, если минус то против часовой
var beta = (beta*Math.PI)/360;
var l = (Math.sqrt(dl*dl+dl*dl))/2;
var gam = Math.PI - ((Math.PI - (beta * Math.PI)/360)/2) - (Math.PI/4);
var b = 2*l*Math.sin(beta/2);
setTimeout(function(){
c.clearRect(0,0,dl,dl);
var x = b*Math.sin(gam);
var y = b*Math.cos(gam);
c.transform(Math.cos(beta), Math.sin(beta), -Math.sin(beta), Math.cos(beta), x, -y);
c.drawImage(i, 0, 0, dl, dl);
c.restore();
setTimeout(arguments.callee,10);
},0);
}
i.src = "http://javascript.ru/forum/image.php?u=11&dateline=1273676600";
}
CanvasCenter();
</script>
</body></html>
rotate + translate = matrix. Ты это имел в виду, или можно как-то по другому вращать объект? |
Положение каждого нового элемента зависит от того, где нарисовали предыдущий, если при этом использовался rotate. Rotate вращает оси, что не хорошо, если на канвасе что-то пытаются нарисовать разные ничего не знающие друг о друге функции. Можно конечно каждый раз возвращать оси в исходное положение, но по опыту OpenGL-программирования, могу сказать, что лучше взять за правило использовать setTransform для начала рисования каждого нового элемента и transform в место rotate для поворотов в локальном контексте. Rotate обычно используют для вращения камеры, но так тут речь о 2D то этот метод практически не нужен оказывается.
|
блин, голова закружилась о этой картинки
|
охохо)) решил познать canvas и запнулся на ротейте а тут живой пример)) большое спс))
|
Цитата:
|
Gozar,
всё норм . но чтоб не стирать всякий раз изображение перед рисованием нового используй globalCompositeOperation -управляет наложением графики |
Gozar, стоит начать отучаться от использования arguments.callee :)
|
Вот тут
http://vikohn.narod.ru/test/exam02b.htm код, где смещение делается автоматически типа c.drawImage(img,-img.width/2,-img.height/2); и вроде работает. Правда вращать не пробовал. |
Откройте глаза этим скриптам 2 года. Не занимайтесь некропостингом, либо выложите свой пример.
|
Может каким-то скриптам и 2 года, не знаю, я их не видел. А пример я выложил в интернет, этого вполне достаточно. Зачем переписывать?
|
Виктор Кон, я не к вам обращался. Вы можете ничего не делать. Ваш пример не имеет никакого отношения к теме, как и все комментарии в ней.
Цитата:
|
Кстати кто нибудь делал тесты на производительность между поворотом канвы и матрицей трансформации?
Без теста,возможно субъективное мнение: при повороте -просто "поворот системы координат" происходит(пересчёт массива точек изображения) при трансформации -сохранение,трансформация(п ересчёт массива точек изображения),восстановлени е итого 3 операции вместо одной |
Цитата:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head></head>
<body>
<canvas id="ci" width="280" height="280"></canvas>
<script>
function CanvasCenter(){
var i = new Image();
i.onload = function(){
var dl = i.width;
var cnv=document.getElementById("ci");
var c = cnv.getContext("2d");
c.drawImage(i, 0, 0, dl, dl);
var beta = -3;
var beta = (beta*Math.PI)/360;
var bet=0;
var x=100;
var y=100;
setTimeout(function(){
bet+=beta;
c.clearRect(0,0,cnv.width,cnv.height);
c.save();
c.translate(x,y);
c.rotate(bet);
c.drawImage(i, -dl/2, -dl/2);
c.restore();
setTimeout(arguments.callee,10);
},0);
}
i.src = "http://javascript.ru/forum/image.php?u=11&dateline=1273676600";
};
CanvasCenter();
</script>
</body></html>
Вот мой вариант-смешение можно задаватьrotate постоянно пользуюсь а для того чтобы записать и вернуть текущий контест служат функции save() и restore()- |
И всем кто не в теме test123456789test, это клон Awillum-а(cms он усиленно пиарил). Только его забанили за мат и неуважительное отношение к товарищам.
|
Цитата:
А что у тебя ? О_о |
Автор какое следующие твое творение ? Смотрю на твой профиль и топики http://javascript.ru/forum/search.php?searchid=1206089 и вижу что ты мастер флудерастии. А что нибудь выучить за такое время до сих пор не осилил ? Все также сидишь нищерброд в общаге на бутербродах ? )))
|
Цитата:
document.write('hello world');
Хочешь буду им гордиться? ;) |
Цитата:
Цитата:
|
>>Хочешь буду им гордиться?
хахаа ну ты же гордишься этой подделкой)) >>Эх, молодость, молодость. Стар я для этого. кто тебе доктор ? нужно было пары в универе не прогуливать, может быть тогда у тебя были бы хоть какие то шансы устроиться программистом. И работать над серьезными проектами, а не над этой хренью что ты тут всем показываешь. Такое должно лежать на полке в дальнем углу, что бы никто его даже не видел, а не на публику выкладывать. |
Цитата:
Цитата:
Цитата:
|
>>Этому скрипту почти три года
Ух как ты вырос за три года. Еще может какие то проекты реализовал ? >>Быть программистом это что вершина возможностей и желаний? Че базаришь тогда если в теме не соображаешь ? >>У меня две вышки если чё. Слесарь и сварщик. С тобой все ясно. |
Цитата:
Цитата:
Цитата:
Мне приятно твое внимание, с нетерпением будут ждать новые твои высказывания. |
| Часовой пояс GMT +3, время: 21:11. |