Question

到目前为止，它是移动触摸铅笔工具，它可以完美地绘制，但我想知道...我将如何制作它以便绘制完全直线而不是可以在线外绘制的基本铅笔工具？

到目前为止，这是代码：

// "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

Answer 1

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

Answer 2

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

只要手指触摸屏幕，一个选项是铅笔工具放下点。然后线条工具从水龙头到水龙头。或者，如果点击并滑动，线条工具可以将线条从触摸点橡皮筋带到拖动点，然后在触摸提升之前保留最后一个点。

如何将A（Touch）铅笔工具变成直线工具？

2 个答案: