Рисование холста пером поверхности

В настоящее время я использую этот код для рисования на холсте ручкой из Microsoft Surface (на поверхности, конечно):

<html>
      <head>
        <style>
          /* Disable intrinsic user agent touch behaviors (such as panning or zooming) */
          canvas {
            touch-action: none;
          }
        </style>


      <script type='text/javascript'>
        var lastPt = null;
        var canvas;
        var ctx;

        function init() {
          canvas = document.getElementById("mycanvas");
          ctx = canvas.getContext("2d");
          var offset  = getOffset(canvas);
          if(window.PointerEvent) {
            canvas.addEventListener("pointerdown", function() {
              canvas.addEventListener("pointermove", draw, false);
            }
            , false);
            canvas.addEventListener("pointerup", endPointer, false);
          }
          else {
            //Provide fallback for user agents that do not support Pointer Events
            canvas.addEventListener("mousedown", function() {
              canvas.addEventListener("mousemove", draw, false);
            }
            , false);
            canvas.addEventListener("mouseup", endPointer, false);
          }
        }

        // Event handler called for each pointerdown event:
        function draw(e) {
          if(lastPt!=null) {
            ctx.beginPath();
            // Start at previous point
            ctx.moveTo(lastPt.x, lastPt.y);
            // Line to latest point
            ctx.lineTo(e.pageX, e.pageY);
            // Draw it!
            ctx.stroke();
          }
          //Store latest pointer
          lastPt = {x:e.pageX, y:e.pageY};
        }

        function getOffset(obj) {
          //...
        }

        function endPointer(e) {
          //Stop tracking the pointermove (and mousemove) events
          canvas.removeEventListener("pointermove", draw, false); 
          canvas.removeEventListener("mousemove", draw, false); 

          //Set last point to null to end our pointer path
          lastPt = null;
        }

      </script>
    </head>
    <body onload="init()">
      <canvas id="mycanvas" width="500" height="500" style="border:1px solid black;"></canvas>
    </body>
  </html>

Пока все хорошо, работает нормально.

Что я планирую сделать сейчас, так это то, что холст реагирует на давление на мою поверхность пера.

я знаю это PointerEvent имеет свойство pressure и я знаю, что для холста, есть lineWidth, Но как я могу их объединить? Так что, когда я оказываю только небольшое давление, я получаю тонкую линию, и чем больше давление, тем толще линия?

Спасибо

Редактировать: только что понял, что в коде, похоже, есть проблема, даже когда рисуете пером, кажется, что он переходит к другому случаю (так что запасной вариант для использования мыши), попытался добавить console.log в части if, и это не напечатано... Почему это?

Источник

0 ответов

Другие вопросы по тегам