畫布繪製問題

Question

我使用javascript在汽車圖像上繪製括號，它在頁面上的所有內容都是畫布元素時正常工作，但是當我向頁面添加其他內容時（比如表單）它拒絕中風。 tool.init_x和tool.final_y都仍然設置並正常工作，只是沒有行正在被撫摸。

if(window.addEventListener) { 
    window.addEventListener('load', function() { 
     var canvas, context, tool; 

     function init() { 
     // Find the canvas element. 
     canvas = document.getElementById('imageView'); 
     if (!canvas) { 
      alert('Error: I cannot find the canvas element!'); 
      return; 
     } 

     if (!canvas.getContext) { 
      alert('Error: no canvas.getContext!'); 
      return; 
     } 

     // Get the 2D canvas context. 
     context = canvas.getContext('2d'); 
     if (!context) { 
      alert('Error: failed to getContext!'); 
      return; 
     } 

     // Pencil tool instance. 
     tool = new tool_pencil(); 

     // Attach the mousedown, mousemove and mouseup event listeners. 
     canvas.addEventListener('mousedown', ev_canvas, false); 
     canvas.addEventListener('mousemove', ev_canvas, false); 
     canvas.addEventListener('mouseup', ev_canvas, false); 
     context.strokeStyle = "#dd3c34"; 
     context.line = [] 
     } 

     // This painting tool works like a drawing pencil which tracks the mouse 
     // movements. 
     function tool_pencil() { 
     var tool = this; 
     this.started = false; 

     // This is called when you start holding down the mouse button. 
     // This starts the pencil drawing. 
     this.mousedown = function (ev) { 

      ev.preventDefault(); 

      context.beginPath(); 
      context.moveTo(ev._x, ev._y); 
      tool.started = true; 
      tool.init_x = ev._x; 
      tool.init_y = ev._y; 
     }; 

     // This function is called every time you move the mouse. Obviously, it only 
     // draws if the tool.started state is set to true (when you are holding down 
     // the mouse button). 
     this.mousemove = function (ev) { 

      ev.preventDefault(); 

      if (tool.started) { 
      if ((ev._x-tool.init_x)>20 || (ev._x-tool.init_x)<(-20)) 
      { 
       context.lineTo(ev._x, tool.init_y); 
       context.stroke(); 

       tool.line_type = "horizontal" 
      } 
      else if ((ev._y-tool.init_y)>20 || (ev._y-tool.init_y)<(-20)) 
      { 
       context.lineTo(tool.init_x, ev._y); 
       context.stroke(); 

       tool.line_type = "vertical" 
      } 
      } 
     }; 

     // This is called when you release the mouse button. 
     this.mouseup = function (ev) { 

      ev.preventDefault(); 

      if (tool.started) { 
      tool.final_x = ev._x; 
      tool.final_y = ev._y; 

      tool.mousemove(ev); 
      tool.started = false; 


      //need to add the braces to the lines && store the lines in a json array 
      var bracket_direction_number; 

      if (tool.line_type == "horizontal") 
      { 
       if (tool.init_y > 70) 
       { 
        bracket_direction_number = (-10); 
       } 
       else 
       { 
        bracket_direction_number = 10; 
       } 

       context.beginPath(); //start the first side of the bracket 
       context.moveTo(tool.init_x, tool.init_y); //move to the lines starting point 
       context.lineTo(tool.init_x, (tool.init_y+bracket_direction_number)); //line to the starting point +10 on the y 
       context.stroke(); 

       context.beginPath(); 
       context.moveTo(tool.final_x, tool.init_y); //move to the end point, init_y rather than final_y because init_y sticks to the line 
       context.lineTo(tool.final_x, (tool.init_y+bracket_direction_number)); //add the bracket 
       context.stroke(); 

       context.line.push({ 
        'start' : { 'x' : tool.init_x, 'y' : tool.init_y }, 
        'end' : { 'x' : tool.final_x, 'y' : tool.init_y } 
        }); 
      } 
      else if (tool.line_type == "vertical") 
      { 
       if (tool.init_x > 150) 
       { 
        bracket_direction_number = (-10); 
       } 
       else 
       { 
        bracket_direction_number = 10; 
       } 

       context.beginPath(); 
       context.moveTo(tool.init_x, tool.init_y); 
       context.lineTo((tool.init_x+bracket_direction_number), tool.init_y); 
       context.stroke(); 

       context.beginPath(); 
       context.moveTo(tool.init_x, tool.final_y); 
       context.lineTo(tool.init_x+bracket_direction_number, tool.final_y); 
       context.stroke(); 

       context.line.push({ 'start' : { 'x' : tool.init_x, 'y' : tool.init_y }, 'end' : { 'x' : tool.init_x, 'y' : tool.final_y } }); 
      } 
      } 
     }; 
     } 

     // The general-purpose event handler. This function just determines the mouse 
     // position relative to the canvas element. 
     function ev_canvas (ev) { 
     if (ev.layerX || ev.layerX == 0) { // Firefox 
      ev._x = ev.layerX; 
      ev._y = ev.layerY; 
     } else if (ev.offsetX || ev.offsetX == 0) { // Opera 
      ev._x = ev.offsetX; 
      ev._y = ev.offsetY; 
     } 

     // Call the event handler of the tool. 
     var func = tool[ev.type]; 
     if (func) { 
      func(ev); 
     } 
     } 

     init(); 

}, false); } 

Answer 1

的問題是在ev.layerX和ev.layerY因爲它們繪製相對於文檔作爲一個整體，而不是在畫布元件，除非它被定位。解決的辦法是簡單：

canvas 
{ 
    position: relative; 
}