Вращающееся полотно полного окна

Я делаю простое (пока) приложение для рисования на холсте. Я могу рисовать простые фигуры, такие как точки, квадраты, линии, но когда я пытаюсь повернуть все изображение - ничего не происходит. Нет ошибок, нет ротации. Подскажите где проблема.

Canvas обновляется до размера окна с помощью функции onwindowresize:

function  adaptSize() {
    var canvas = document.getElementById('canvas');
    // set size to window
    canvas.setAttribute('width',window.innerWidth);
    canvas.setAttribute('height',window.innerHeight);
    var ctx = canvas.getContext("2d");
    // set state size to window
    ctx.width = window.innerWidth;
    ctx.height = window.innerHeight;
    drawSaved();
    inform('Canvas re-drawed - window resized');
}

Каждая функция рисования сохраняет себя в локальном хранилище для повторного рисования, например, для размещения точки:

function placeDot(x,y){
if(document.getElementById('colors').hasAttribute('chosen')){ var color = document.getElementById('colors').getAttribute('chosen');}else{ var color = 'rgba(0,0,0,1)'; }
var canvas = document.getElementById("canvas");
if(canvas.getContext) {
    var ctx = canvas.getContext("2d");
    ctx.save();
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(x-2,y-2,5,0,Math.PI*2,true);
    ctx.fill();
    ctx.restore();
}
save("//Dot("+x+","+y+",5,'"+color+"')");
return false;
}

чем перерисовать функцию:

function drawSaved(){
var picture = localStorage.getItem("picture");
var drawstate =document.getElementById('drawstate');
console.log('picture:'+picture+'.');
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
if((picture=="")||(picture==null)){
    picture = ""
    localStorage.setItem("picture", picture);
    drawstate.innerHTML='picture empty';
    ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
    console.log('cleared');
}else{
    console.log(picture);
    saved = picture.split('//');
    for(var i=1;i<saved.length;i++){
        eval(saved[i]);
    }
    drawstate.innerHTML='picture restored';
}
}

Итак, создание вращения:

function turn(angle){
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
     ctx.save();
    console.log('saved');
     ctx.rotate(angle);
    console.log('rotated by'+angle);
     ctx.restore();
    console.log('restored');
     save("//Turn('"+angle+"')");
     return false;
}

Все это не дает никакого эффекта на вращение - или любое другое преобразование. Рисовка в порядке. Пожалуйста помоги.

Спасибо, Пифон.

PS: эта программа: http://www.pifon.com/3d/ вращение должно работать на стрелка вправо нажмите.

Полный сценарий: http://www.pifon.com/3d/js/index.js< /а>


person Pifon    schedule 08.02.2012    source источник


Ответы (2)


У вас есть две функции с именем Turn(angle) в исходном коде.

person tnt-rox    schedule 08.02.2012

Видимо начинает работать. Исправлена ​​функция поворота.

function turn(angle){
   var canvas = document.getElementById("canvas");
   var ctx = canvas.getContext("2d");
    ctx.translate(canvas.width/2,canvas.height/2);
    ctx.rotate(angle*(Math.PI/180));
    ctx.translate(-canvas.width/2,-canvas.height/2);
    inform('turn executed (by: '+angle+' degrees)');
    drawSaved();
   return false;
}

Спасибо за вашу помощь.

Пифон

person Pifon    schedule 09.02.2012