Поворот полного окна холста - PullRequest
Новая
       14

Поворот полного окна холста

1 голос
/ 08 февраля 2012

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

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;
}

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

Спасибо Pifon

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

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

Ответы [ 2 ]

1 голос
/ 09 февраля 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;
}

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

Pifon

1 голос
/ 08 февраля 2012

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

...