2012-02-08 71 views
1

我正在做簡單的(現在)應用程序在畫布上繪製。 我可以繪製簡單的形狀,如放點,方塊,線條,但是當我嘗試旋轉整個圖像時 - 沒有任何反應。沒有錯誤,沒有旋轉。請告知問題在哪裏。旋轉的全窗口畫布

帆布由功能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'); 
} 

每個繪製函數保存本身inlocalstorage重新繪製,例如放置點:

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

回答

1

顯然它開始工作。 更正了轉彎功能。

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

您的原始源命名Turn(angle)兩個功能。

+0

謝謝,糾正。但問題依然存在。 – Pifon 2012-02-09 04:41:12