Question

我正在尝试使用包含客户签名框的HTML5页面。这在大多数情况下将用于平板电脑。这是通过Canvas元素和鼠标上的JavaScript事件完成的。

问题1：Y部分工作正常，但是如果我将画布设置为300，X部分将仅起作用。如果宽度为500，则X部分在x-coord 0处正确。当用户绘制时对于x-coord 300，屏幕上的线条现在处于画布上的500px标记处。在我的代码中，我设置任何东西到300px，所以我只是没有得到什么。

问题2：我有代码停止在平板电脑上滚动并允许用户登录画布（请参阅“阻止”JavaScript中的var）。这根本不起作用。

HTML：

<div id="canvasDiv">
   <canvas id="canvasSignature"></canvas>
</div>

CSS :(使宽度100％达到500px，总是高150px）

#canvasDiv
{
   float: left;
   width: 100%;
   height: 150px;
   max-width: 500px;
}

#canvasSignature
{
   width: 100%;
   height: 100%;
   background-color: #F0F0F0;
   border: 1px solid Black;
   cursor: crosshair;
}

JavaScript的：

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

   var prevent = false;

   // works out the X, Y position of the click INSIDE the canvas from the X, Y position on the page
   function getPosition(mouseEvent, element) {
      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;
      }

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

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

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

         context.moveTo(position.X, position.Y);
         context.beginPath();
         prevent = true;

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

      document.addEventListener('touchmove', function (event) {
         if (prevent) {
            event.preventDefault();
         }

         return event;
      }, false);
   }

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

      var position = getPosition(mouseEvent, element);

      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, element, context) {
      // draw the line to the finishing coordinates
      drawLine(mouseEvent, element, context);

      context.closePath();

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

Answer 1

#canvasSignature
{
   width: 100%;
   height: 100%;
   background-color: #F0F0F0;
   border: 1px solid Black;
   cursor: crosshair;
}

这不好！根据经验，您永远不想更改画布的CSS宽度/高度。

你实际上正在拉伸尺寸为300x150的画布，以在整个屏幕上倾斜。这可能是99％的鼠标问题的根源。

原因似乎在y方向上很好是纯粹的巧合：画布默认为300x150，你有一个高150的div，所以CSS没有偏差。但是如果你想让div高达200，那么你也会看到问题！

您需要将Canvas高度和宽度设置为属性，将不设置为CSS属性：

<canvas id="canvasSignature" width="500" height="150"></canvas>

或者在JavaScript中：

var can = document.getElementById('canvasSignature');
can.width = 500;
can.height = 150;

看起来您希望动态更改画布宽度。这没关系，但你必须做一些事情。一种方法是使用窗口的onresize事件，并在每次发生这种情况时将画布宽度设置为等于div的clientWidth（如果clientWidth当然已更改）。另一个是做一个简单的通用计时器来检查每半秒左右的同一件事。

请注意，我没有检查getPosition函数的有效性。可能存在其他错误可能是一个单独的问题，但它可能没问题。

HTML5画布和鼠标事件问题

1 个答案: