Форум

Gozar · #1 (**permalink**) 22.09.2010, 21:00

<!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, нет ли решения по проще, например указания точки смещения центра?
Если нет то просьба тыкать во все узкие места скрипта. Ну а остальным просто дарю

Octane · #2 (**permalink**) 23.09.2010, 02:50

rotate — зло, оси трогать не надо, лучше использовать трансформацию

Slawaq · #3 (**permalink**) 24.09.2010, 03:33

о боже, как же мне это надо было, хотя, всё таки точка смещения нужна бы была бы, но ничё и так придумаем как без неё)

Gozar · #4 (**permalink**) 24.09.2010, 08:58

Сообщение от Slawaq

о боже, как же мне это надо было, хотя, всё таки точка смещения нужна бы была бы, но ничё и так придумаем как без неё)

Собственно ваши рассуждения в одной из тем и навели меня на мысль написать подобный скрипт.

Точку смещения можно легко указать:

c.drawImage(i, 0, 0, dl, dl);

c.drawImage(i, 30, 30, dl, dl); //30 относительно центра

Однако по совету Octane я перепишу этот скрипт, думаю что он прав, а вообще я скрипт почти не тестировал, ни на скорость ни на баги

Gozar · #5 (**permalink**) 20.10.2010, 22:47

Сообщение от Octane

rotate — зло, оси трогать не надо, лучше использовать трансформацию

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. Ты это имел в виду, или можно как-то по другому вращать объект?

Octane · #6 (**permalink**) 21.10.2010, 09:47

Положение каждого нового элемента зависит от того, где нарисовали предыдущий, если при этом использовался rotate. Rotate вращает оси, что не хорошо, если на канвасе что-то пытаются нарисовать разные ничего не знающие друг о друге функции. Можно конечно каждый раз возвращать оси в исходное положение, но по опыту OpenGL-программирования, могу сказать, что лучше взять за правило использовать setTransform для начала рисования каждого нового элемента и transform в место rotate для поворотов в локальном контексте. Rotate обычно используют для вращения камеры, но так тут речь о 2D то этот метод практически не нужен оказывается.

monolithed · #7 (**permalink**) 21.10.2010, 13:53

блин, голова закружилась о этой картинки

розовый слоник · #8 (**permalink**) 22.03.2012, 04:16

охохо)) решил познать canvas и запнулся на ротейте а тут живой пример)) большое спс))

Gozar · #9 (**permalink**) 22.03.2012, 09:45

Сообщение от розовый слоник

большое спс))

на здоровье. ))

dmitriymar · #10 (**permalink**) 22.03.2012, 10:26

Gozar,
всё норм . но чтоб не стирать всякий раз изображение перед рисованием нового используй globalCompositeOperation -управляет наложением графики

Форум

Справочник

Discord чат

Курсы javascript