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;
}

画布绘制的问题

1 个答案: