javascript - 画线 JavaScript - 点击问题

Question

我在创建此代码时遇到问题。我遇到的问题是，当我单击以停止绘制线条时，它有 50% 的机会第一次工作但是如果你只做直线，它似乎只能正常工作，但我希望它从任何方向工作，我不是 100% 确定为什么它不工作。

(我使用 1.12.4 jquery，因为我将其添加到 WordPress 中，这就是跑掉的)

$(function() {
  var x1 = null,
    y1 = null;
  var offsetX = 0,
    offsetY = 0;
  
  var moveLineId = "moveLine";

  function createLine(x1, y1, x2, y2, id) {

    var length = Math.sqrt(((x1 - x2) * (x1 - x2)) + ((y1 - y2) * (y1 - y2)));
    var angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
    var transform = 'rotate(' + angle + 'deg)';

    offsetX = (x1 > x2) ? x2 : x1;
    offsetY = (y1 > y2) ? y2 : y1;

    var line = $('<div>')
      .appendTo('#demo')
      .addClass('line')
      .css({
        'position': 'absolute',
        '-webkit-transform': transform,
        '-moz-transform': transform,
        'transform': transform
      })
      .width(length)
      .offset({
        left: offsetX,
        top: offsetY
      });

    if(id != null) line.attr('id', id);

    return line;
  }

  $('#demo').click(function(event) {
      $(".line").removeAttr('id');
      var x = event.pageX,
        y = event.pageY;

      if (x1 == null) {
        x1 = x;
        y1 = y;
      } else {
        x1 = y1 = null;
      }
    })
    .delegate('.line', 'click', function(event) {
      event.preventDefault();
      $(this).toggleClass('active');
      x1 = y1 = null;
      return false;
    });
    

  $('#demo').mousemove(function(event) {
      var x = event.pageX,
        y = event.pageY;
        
      
      
      if (x1 != null) {
        $("#" + moveLineId).remove();
        createLine(x1, y1, x, y, moveLineId)
      } else {
        x1 = y1 = null;
      }
    })
    
});

div.line {
  transform-origin: 0 100%;
  height: 3px;
  /* Line width of 3 */
  background: #000;
  /* Black fill */
}

#demo {
  border: 1px dashed #ccc;
  height: 400px;
}

div.transforming-on-corner {
  transform-origin: 0% 0%;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
  
<h3> click two point to draw a line :</h3>
<div id="demo" class="wide">

</div>

Answer 1

代替 click 事件，监听 mousedown 和 mouseup 事件来开始/停止画线。

$(function() {
  var x1 = null,
    y1 = null;
  var offsetX = 0,
    offsetY = 0;

  var moveLineId = "moveLine";

  // Use "mousedown" here so the start of a line is registered as soon as you press the mouse button.
  $('#demo').on("mousedown", function(event) {
      $(".line").removeAttr('id');
      var x = event.pageX,
        y = event.pageY;

      if (x1 == null) {
        x1 = x;
        y1 = y;
      } else {
        x1 = y1 = null;
      }
    })
    .delegate('.line', 'mouseup', function(event) {
      // Use "mouseup" here so the start of a line is registered as soon as you release the mouse button.
      event.preventDefault();
      $(this).toggleClass('active');
      x1 = y1 = null;
      return false;
    });

  $('#demo').mousemove(function(event) {
    var x = event.pageX,
      y = event.pageY;

    if (x1 != null) {
      $("#" + moveLineId).remove();
      createLine(x1, y1, x, y, moveLineId)
    } else {
      x1 = y1 = null;
    }
  });


  function createLine(x1, y1, x2, y2, id) {

    var length = Math.sqrt(((x1 - x2) * (x1 - x2)) + ((y1 - y2) * (y1 - y2)));
    var angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
    var transform = 'rotate(' + angle + 'deg)';

    offsetX = (x1 > x2) ? x2 : x1;
    offsetY = (y1 > y2) ? y2 : y1;

    var line = $('<div>')
      .appendTo('#demo')
      .addClass('line')
      .css({
        'position': 'absolute',
        '-webkit-transform': transform,
        '-moz-transform': transform,
        'transform': transform
      })
      .width(length)
      .offset({
        left: offsetX,
        top: offsetY
      });

    if (id != null) line.attr('id', id);

    return line;
  }

});

div.line {
  transform-origin: 0 100%;
  height: 3px;
  background: #000;
}

#demo {
  border: 1px dashed #ccc;
  height: 400px;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<div id="demo" class="wide"></div>