Question

我正在做简单的（现在）应用程序在画布上绘制。我可以绘制简单的形状，如放置点，正方形，线条，但当我尝试旋转整个图像时 - 没有任何反应。没有错误，没有轮换。请告知问题在哪里。

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

Answer 1

原始来源中有两个名为Turn(angle)的函数。

Answer 2

显然它开始起作用了。修正了转弯功能。

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

旋转全窗口画布

2 个答案: