Javascript 如何将（触摸）铅笔工具变成直线工具？

到目前为止，它是一款移动式触控铅笔工具，可以画得很完美，但我想知道。。。我该如何使它画出一条完全的直线，而不是一个基本的铅笔工具，它可以画线外

---

以下是迄今为止的代码：

// "Draw Line" Button
$(document).ready(function () {
         initialize();
      });


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

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

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

         // This will be defined on a TOUCH device such as iPad or Android, etc.
         var is_touch_device = 'ontouchstart' in document.documentElement;

         if (is_touch_device) {
            // create a drawer which tracks touch movements
            var drawer = {
               isDrawing: false,
               touchstart: function (coors) {
                  context.beginPath();
                  context.moveTo(coors.x, coors.y);
                  this.isDrawing = true;
               },
               touchmove: function (coors) {
                  if (this.isDrawing) {
                     context.lineTo(coors.x, coors.y);
                     context.stroke();
                  }
               },
               touchend: function (coors) {
                  if (this.isDrawing) {
                     this.touchmove(coors);
                     this.isDrawing = false;
                  }
               }
            };

            // create a function to pass touch events and coordinates to drawer
            function draw(event) {

               // get the touch coordinates.  Using the first touch in case of multi-touch
               var coors = {
                  x: event.targetTouches[0].pageX,
                  y: event.targetTouches[0].pageY
               };

               // Now we need to get the offset of the canvas location
               var obj = sigCanvas;

               if (obj.offsetParent) {
                  // Every time we find a new object, we add its offsetLeft and offsetTop to curleft and curtop.
                  do {
                     coors.x -= obj.offsetLeft;
                     coors.y -= obj.offsetTop;
                  }
                  // The while loop can be "while (obj = obj.offsetParent)" only, which does return null
                  // when null is passed back, but that creates a warning in some editors (i.e. VS2010).
                  while ((obj = obj.offsetParent) != null);
               }

               // pass the coordinates to the appropriate handler
               drawer[event.type](coors);
            }


            // attach the touchstart, touchmove, touchend event listeners.
            sigCanvas.addEventListener('touchstart', draw, false);
            sigCanvas.addEventListener('touchmove', draw, false);
            sigCanvas.addEventListener('touchend', draw, false);

            // prevent elastic scrolling
            sigCanvas.addEventListener('touchmove', function (event) {
               event.preventDefault();
            }, false); 
         }
         else {

            // 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, sigCanvas);

               context.moveTo(position.X, position.Y);
               context.beginPath();

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

         }
      }

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

         var position = getPosition(mouseEvent, sigCanvas);

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

         context.closePath();

         // unbind any events which could draw
         $(sigCanvas).unbind("mousemove")
                     .unbind("mouseup")
                     .unbind("mouseout");
      }

谢谢，

---

Wardenclyffe

在第一次触摸时固定笔下点，然后在下一次触摸的任何位置从第一次触摸到新触摸绘制一条直线。在新触摸上方有一个浮动复选标记以接受新行。如果未选中复选标记且再次触摸，则删除上一行，绘制新行，并显示另一复选标记以保存新行。在原始笔下点上方提供一个（x）以取消线条绘制工具。

在第一次触摸时锚定笔下点，然后在下一次触摸的任何位置从第一次触摸到新触摸绘制一条直线。在新触摸上方有一个浮动复选标记以接受新行。如果未选中复选标记且再次触摸，则删除上一行，绘制新行，并显示另一复选标记以保存新行。在原始笔下点上方提供一个（x）以取消线条绘制工具。

直线工具和铅笔工具的区别在于铅笔绘制尽可能多的点，并将它们与（可能平滑的）线段连接起来。直线工具用相对较大的线段连接少量直线

---

一种选择是，只要手指接触屏幕，铅笔工具就可以放下点。然后直线工具从一个点到另一个点绘制。或者，如果您轻触并滑动，直线工具可以用橡皮筋将线从接触点固定到拖动点，然后在触摸提起之前保留最后一点。

直线工具和铅笔工具的区别在于铅笔绘制尽可能多的点，并将它们与（可能平滑的）线段连接起来。直线工具用相对较大的线段连接少量直线

一种选择是，只要手指接触屏幕，铅笔工具就可以放下点。然后直线工具从一个点到另一个点绘制。或者，如果轻触并滑动，线条工具可以用橡皮筋将线条从触摸点固定到拖动点，然后在触摸提起之前保留最后一点