Question

我的画布绘图有问题。

情形1：
我的电脑既可以用作触摸屏，也可以用鼠标。但是，我只能用触摸屏画画。鼠标不起作用。

情况2：
我朋友的PC只有鼠标，画布工作正常。

请帮忙。我可以看到问题所在，但我还不够好做出改变。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8" />
   <title>Desktops and Tablets</title>

   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

   <script type="text/javascript">
      $(document).ready(function () {
         initialize();
      });


      // works out the X, Y position of the click inside the canvas from the X, Y position on the page
      function getPosition(mouseEvent, sigCanvas) {
         var x, y;
         if (mouseEvent.pageX != undefined && mouseEvent.pageY != undefined) {
            x = mouseEvent.pageX;
            y = mouseEvent.pageY;
         } else {
            x = mouseEvent.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            y = mouseEvent.clientY + document.body.scrollTop + document.documentElement.scrollTop;
         }

         return { X: x - sigCanvas.offsetLeft, Y: y - sigCanvas.offsetTop };
      }

      function initialize() {
         // get references to the canvas element as well as the 2D drawing context
         var sigCanvas = document.getElementById("canvas1");
         var context = sigCanvas.getContext("2d");
         context.strokeStyle = 'Black';

         // This will be defined on a TOUCH device such as iPad or Android, etc.
         var is_touch_device = 'ontouchstart' in document.documentElement;

         if (is_touch_device) {
            // create a drawer which tracks touch movements
            var drawer = {
               isDrawing: false,
               touchstart: function (coors) {
                  context.beginPath();
                  context.moveTo(coors.x, coors.y);
                  this.isDrawing = true;
               },
               touchmove: function (coors) {
                  if (this.isDrawing) {
                     context.lineTo(coors.x, coors.y);
                     context.stroke();
                  }
               },
               touchend: function (coors) {
                  if (this.isDrawing) {
                     this.touchmove(coors);
                     this.isDrawing = false;
                  }
               }
            };

            // create a function to pass touch events and coordinates to drawer
            function draw(event) {

               // get the touch coordinates.  Using the first touch in case of multi-touch
               var coors = {
                  x: event.targetTouches[0].pageX,
                  y: event.targetTouches[0].pageY
               };

               // Now we need to get the offset of the canvas location
               var obj = sigCanvas;

               if (obj.offsetParent) {
                  // Every time we find a new object, we add its offsetLeft and offsetTop to curleft and curtop.
                  do {
                     coors.x -= obj.offsetLeft;
                     coors.y -= obj.offsetTop;
                  }
                  // The while loop can be "while (obj = obj.offsetParent)" only, which does return null
                  // when null is passed back, but that creates a warning in some editors (i.e. VS2010).
                  while ((obj = obj.offsetParent) != null);
               }

               // pass the coordinates to the appropriate handler
               drawer[event.type](coors);
            }


            // attach the touchstart, touchmove, touchend event listeners.
            sigCanvas.addEventListener('touchstart', draw, false);
            sigCanvas.addEventListener('touchmove', draw, false);
            sigCanvas.addEventListener('touchend', draw, false);

            // prevent elastic scrolling
            sigCanvas.addEventListener('touchmove', function (event) {
               event.preventDefault();
            }, false); 
         }
         else {

            // start drawing when the mousedown event fires, and attach handlers to
            // draw a line to wherever the mouse moves to
            $("#canvas1").mousedown(function (mouseEvent) {
               var position = getPosition(mouseEvent, sigCanvas);

               context.moveTo(position.X, position.Y);
               context.beginPath();

               // attach event handlers
               $(this).mousemove(function (mouseEvent) {
                  drawLine(mouseEvent, sigCanvas, context);
               }).mouseup(function (mouseEvent) {
                  finishDrawing(mouseEvent, sigCanvas, context);
               }).mouseout(function (mouseEvent) {
                  finishDrawing(mouseEvent, sigCanvas, context);
               });
            });

         }
      }

      // draws a line to the x and y coordinates of the mouse event inside
      // the specified element using the specified context
      function drawLine(mouseEvent, sigCanvas, context) {

         var position = getPosition(mouseEvent, sigCanvas);

         context.lineTo(position.X, position.Y);
         context.stroke();
      }

      // draws a line from the last coordiantes in the path to the finishing
      // coordinates and unbind any event handlers which need to be preceded
      // by the mouse down event
      function finishDrawing(mouseEvent, sigCanvas, context) {
         // draw the line to the finishing coordinates
         drawLine(mouseEvent, sigCanvas, context);

         context.closePath();

         // unbind any events which could draw
         $(sigCanvas).unbind("mousemove")
                     .unbind("mouseup")
                     .unbind("mouseout");
      }
   </script>

</head>

<body>
   <h1>Canvas test</h1>

   <div id="canvasDiv">
      <!-- It's bad practice (to me) to put your CSS here.  I'd recommend the use of a CSS file! -->
      <canvas id="canvas1" width="500px" height="500px" style="border:2px solid #000000; margin-left: 400px;
                     margin-top: 100px; "></canvas>
   </div>
</body>
</html>

Answer 1

以下代码会导致您遇到麻烦 - 它只能绑定触摸事件或仅触发鼠标事件。

if (is_touch_device) {
....
}
else {
....
}

也许你可以使用jQuery的vmouse？或尝试绑定触摸和鼠标事件...

鼠标输入不起作用，只触摸

1 个答案: