HTML5 Canvas и проблема с мышью

Question

Я пытаюсь создать страницу HTML5 с подписью клиента. Это будет использоваться на планшетах по большей части. Это делается с помощью элемента Canvas и событий JavaScript на мышке.

Проблема 1: часть Y работает отлично, но часть X будет работать ТОЛЬКО, если я установлю свой холст на 300. Если ширина равна 500, то часть X верна в точке с координатой 0. Когда пользователь рисует до x-координаты 300 линия на экране теперь находится на отметке 500 пикселей на холсте. НИГДЕ в моем коде я ничего не установил на 300px, поэтому я просто не понимаю, в чем дело.

Проблема 2: у меня есть код, чтобы остановить прокрутку на планшетах и ​​позволить пользователю подписаться на холсте (см. «Предотвращение» var в JavaScript). Это не работает вообще.

HTML:

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

CSS: (Делает ширину от 100% до 500 пикселей и всегда высоту 150 пикселей)

#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, и у вас есть div, высота которого составляет 150, поэтому CSS не вызывает перекоса. Но если бы вы хотели, чтобы div был выше 200, вы бы тоже увидели проблему!

Вам необходимо установить высоту и ширину холста в качестве атрибутов, а , а не в качестве свойств 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. Там могут быть другие ошибки, которые могут быть отдельной проблемой, но, вероятно, все в порядке.