javascript - 锤子 js - 画布元素上的 panmove

Question

我试图在锤子 js 上使用 panmove 事件在画布元素上画一条线。问题是，画布需要坐标开始和坐标去。平移移动事件在鼠标发生任何变化时创建新的 x 和 y（偏移）。问题是当我调用函数时，我只能用相同的 x 和 y 调用她。

如果我可以保存最后一个位置并将其作为第二个参数发送，但我不知道该怎么做。谢谢|！

<div class="canvas-container">
    <canvas class ="canvas" width="500" height="400">   </canvas>
</div>

<select onchange="ShapeEvents(this.value)" class="shapes" name="shapes">
   <option selected>choose shape</option>
  <option value="Line" >Line</option>
</select>


function ShapeEvents(shape) {
  if (shape === "Line") getCoords();
}

let gStartPosition;
function getCoords() {
    let gHammer = new Hammer(gCanvas);
    gHammer.on("panmove", (ev) => {
      gStartPosition = ev.center;
      drawLine(gStartPosition)
    });

function drawLine(startPosition) {
  gCtx.moveTo(startPosition.x, startPosition.y);
  gCtx.lineTo(startPosition.x, startPosition.y);
  gCtx.closePath();
  gCtx.stroke();
}

标签： javascripthammer.js