2

我目前正在使用此代码用 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. 但是我怎样才能把它们结合起来呢？所以当我只施加一点压力时，我会得到一条细线，而压力越大，线就越粗？

谢谢

编辑：刚刚意识到，代码中似乎存在问题，即使用笔绘图，它似乎也跳转到 else 情况（所以使用鼠标的后备），试图console.log在 if 部分添加 a，而且它没有打印出来……这是为什么呢？

4

0 回答 0