Question

我正在制作画布绘图应用程序，我想实现绘图的旋转。但是当我旋转它并想要继续绘制时，鼠标光标并没有指向正在绘制的像素。我该如何解决这个问题？这是我的代码：

    <button id="rotate">rotate right</button>



    var clickX = new Array();
    var clickY = new Array();
    var clickDrag = new Array();
    var paint = false;
    var context = null;
    var canvas = null;
    canvas = document.getElementById('drawing');
    context = canvas.getContext('2d');

    rotate.onclick = function() { 

        context.translate(400,0);
        context.rotate(90*Math.PI/180);                 
        draw();
    }

    canvas.onmousedown = function(e){
        paint = true;           
        addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop,false);                    
        draw();

    }
    canvas.onmousemove = function(e){


    if(paint){  

        addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);            
        draw();

        }
    canvas.onmouseup = function(){
      paint = false;
    }

   function addClick(x, y, dragging)
    { 


      clickX.push(x);
      clickY.push(y);
      clickDrag.push(dragging);       


    }

    function redraw(){
      context.clearRect(0, 0, 400, 400);
      context.lineJoin = "round";
      // usunieto context.lineWidth = 5;

      for(var i=0; i < clickX.length; i++)
      {     



        context.beginPath();
        if(clickDrag[i]){

          context.moveTo(clickX[i-1], clickY[i-1]);
         }else{
           context.moveTo(clickX[i], clickY[i]);
         }
         context.lineTo(clickX[i], clickY[i]);
         context.closePath();            
         context.stroke();
         }


      }


    }

Answer 1

将转换应用于画布仍然是画布状态。您需要保存画布状态，应用转换，绘制，然后恢复画布状态。 2D上下文API提供ctx.save()和ctx.restore()来为您执行此操作。它使用堆栈来保存状态，这样就可以嵌套意味着保存，但必须通过匹配的恢复来删除每个保存;

ctx.save();  // push the current state onto the save stack
ctx.rotate(Math.PI/2); // rotate 90deg clockwise
// call your draw function
ctx.restore();  // pop the last saved state from the save stack

那应该可以解决你的问题。

画布绘图应用程序。旋转绘图

1 个答案: