17.08.2011, 10:22
|
|
Профессор
|
|
Регистрация: 25.04.2011
Сообщений: 280
|
|
|
Для вращения картинки через css3 необходимо создавать отдельные дивы! а если картинок и интерактивных объектов около 1000 для каждого делать?!
|
|
17.08.2011, 10:38
|
|
Профессор
|
|
Регистрация: 25.04.2011
Сообщений: 280
|
|
|
Да и тогда по вашему методу проще создать n-ое количество холстов.. и спокойно вращать каждый элемент в отдельности.. но опять же! а если их будет около 1000!! ..
|
|
17.08.2011, 11:10
|
|
х.з
|
|
Регистрация: 21.11.2010
Сообщений: 4,588
|
|
|
полотно рисуется. затем вращение на необход угол .отрисовка картинки. вращение полотна назад -то есть вращение полотна на тотже угол что и было повёрнуто но со знаком минус.
|
|
17.08.2011, 11:24
|
|
Профессор
|
|
Регистрация: 25.04.2011
Сообщений: 280
|
|
|
Я и пытаюсь это сделать! но ничего не получаеться!
Вот код набросал (только что):
<!DOCTYPE>
<html>
<head></head>
<body>
<canvas id="ci" width="720" height="404"></canvas>
<script>
function CanvasCenter(){
var i = new Image();
var i2 = new Image();
i.onload = function(){
var dl = i.width;
var c = document.getElementById("ci");
var context = c.getContext("2d");
var context2 = c.getContext("2d");
var beta = -0.02; //угол поворота, если минус то против часовой
setTimeout(function(){
context.save();
context.clearRect(0,0,dl,dl);
context.drawImage(i2, 0, 0);
context.restore();
context2.transform(Math.cos(beta), Math.sin(beta), -Math.sin(beta), Math.cos(beta), 0, 0);
context2.drawImage(i, 0, 0, dl, dl);
setTimeout(arguments.callee,10);
},0);
}
i.src = "book.png";
i2.src = "test_screen.png";
}
CanvasCenter();
</script>
</body></html>
|
|
17.08.2011, 11:26
|
|
Профессор
|
|
Регистрация: 25.04.2011
Сообщений: 280
|
|
|
Если начинаю возвращать полотно обратно картинка становиться стационарной!
|
|
17.08.2011, 11:32
|
|
Профессор
|
|
Регистрация: 25.04.2011
Сообщений: 280
|
|
|
Вот еще код!
Тут вообще ниче не крутиться!
<!DOCTYPE>
<html>
<head></head>
<body>
<canvas id="ci" width="720" height="404"></canvas>
<script>
function CanvasCenter(){
var i = new Image();
var i2 = new Image();
i.onload = function(){
var dl = i.width;
var c = document.getElementById("ci");
var context = c.getContext("2d");
var context2 = c.getContext("2d");
var beta = -0.02; //угол поворота, если минус то против часовой
setTimeout(function(){
context.restore();
context.save();
context2.save();
context.clearRect(0,0,dl,dl);
context.drawImage(i2, 0, 0);
context2.restore();
context2.transform(Math.cos(beta), Math.sin(beta), -Math.sin(beta), Math.cos(beta), 0, 0);
context2.drawImage(i, 0, 0, dl, dl);
setTimeout(arguments.callee,10);
},0);
}
i.src = "book.png";
i2.src = "test_screen.png";
}
CanvasCenter();
</script>
</body></html>
|
|
17.08.2011, 11:46
|
|
х.з
|
|
Регистрация: 21.11.2010
Сообщений: 4,588
|
|
|
и не будет. угол поворота в канве относительный а не абсолютный.
для анимации вращения чегото на фоне чегото угол нужно менять . тоесть поворот на 1 градус-возврат на 1 градус,поворот на 2 градуса-возврат на два градуса,поворот на 3 -возврат на 3. и так пока не дойдёшь до необходимого угла
и у канвы нужно для нормальной работы явно задавать и размеры и разрешение
Последний раз редактировалось dmitriymar, 17.08.2011 в 11:49.
|
|
17.08.2011, 11:51
|
|
Профессор
|
|
Регистрация: 25.04.2011
Сообщений: 280
|
|
|
Вот например! И опять ничего! Все задано
..
setTimeout(function(){
{
сontext.rotate(-0.01);
сontext.drawImage (i, 0, 0,720,404);
сontext.rotate(0.01);
сontext.drawImage(i2, 0, 0, 125, 152);
}
..
|
|
17.08.2011, 11:52
|
|
Профессор
|
|
Регистрация: 25.04.2011
Сообщений: 280
|
|
|
т.е. она опять стационарна!
Повернулась.. отрисовала! Вернула все обратно! .. что-то типо этого!
|
|
17.08.2011, 12:08
|
|
х.з
|
|
Регистрация: 21.11.2010
Сообщений: 4,588
|
|
var angl=0.01;
setTimeout(function(){
{
сontext.drawImage (i, 0, 0,720,404);|// рисуем фон
сontext.rotate(-angl);
сontext.drawImage(i2, 0, 0, 125, 152);// рисуем чегото на фоне
сontext.rotate(angl);
angl=angl+0.01;
}
както так
Последний раз редактировалось dmitriymar, 17.08.2011 в 12:11.
|
|
|
|
