1

今のところ、完全に描けるモバイルタッチの鉛筆ツールなのですが、線の外側まで描ける基本的な鉛筆ツールではなく、完全な直線を描くようにするにはどうすればよいのでしょうか。

これまでのコードは次のとおりです。

// "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");
      }

ありがとう、ウォーデンクリフ

4

2 に答える 2

1

最初のタッチでペン ダウン ポイントを固定し、次のタッチがどこでも、最初のタッチから新しいタッチまで直線を引きます。新しい行を受け入れるには、新しいタッチの上にフローティング チェック マークを付けます。チェック マークが選択されておらず、別のタッチがある場合は、前の行を削除し、新しい行を描画し、別のチェック マークを表示して新しい行を保存します。線画ツールをキャンセルするには、元のペン ダウン ポイントの上に (x) を入力します。

于 2012-06-13T20:49:45.110 に答える
0

直線ツールと鉛筆ツールの違いは、鉛筆はできるだけ多くの点を描画し、それらを (場合によっては平滑化された) 線分で接続することです。直線ツールは、少数の線を比較的大きな線セグメントに接続します。

1 つのオプションは、指が画面に触れている限り、鉛筆ツールでポイントを配置することです。そして、線ツールがタップからタップへと描画します。または、タップしてスライドすると、ライン ツールがタッチ ポイントからドラッグ ポイントまでのラインをラバーバンドし、タッチが離される前に最後のポイントを維持することができます。

于 2012-06-13T20:51:09.493 に答える