javascript - Canvas 绘制问题

Question

我正在使用 javascript 在汽车图像上绘制括号，当页面上的所有内容都是 Canvas 元素时它工作正常，但是当我向页面添加其他任何内容(例如表单)时，它拒绝中风。 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 元素进行绘制，除非它已定位。解决方案很简单:

canvas
{
    position: relative;
}