显示带有 JavaScript 的绘图线

Question

我正在尝试让线条图在第一次点击时显示。因此，您可以在第二次单击时看到该行将在何处结束。目前，您在单击第二个点之前看不到该线，但我无法计算出我遗漏了什么，因此该线在第一次单击时显示，并且一直显示到第二次单击。

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

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

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

    return line;
  }

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

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





});

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://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h3> click two point to draw a line :</h3>
<div id="demo" class="wide">

</div>

Answer 1

您可以做的一件事是在您第一次点击后在 $('#demo').mousemove 事件上画一条独特的线。在每次移动时，通过引用其 id（例如：#moveLine）删除该行，并在您的鼠标位置绘制新的行。单击以绘制新线后，它将清除旧线的 id，使其成为永久线。

$(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://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h3> click two point to draw a line :</h3>
<div id="demo" class="wide">

</div>

显示带有 JavaScript 的绘图线

Showing Drawing lines with JavaScript

html

javascript

css

drawing

function