Question

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

（我使用1.12.4 jquery作为即时消息将其添加到WordPress中，这就是运行中的问题）

#Actaul Data
x_data = np.linspace(0, 10, 10) + np.random.uniform(-1.5, 1.5, 10)
y_label = np.linspace(0, 10, 10) + np.random.uniform(-1.5, 1.5, 10)

#Random Variables --> These variables will be be modified by minimize()
m = tf.Variable(0.44)
b = tf.Variable(0.87)

error = 0

for x, y in zip(x_data, y_label):
    error += (y - (m*x + b)) ** 2

optimizer = tf.train.GradientDescentOptimizer(learning_rate=0.001)
train = optimizer.minimize(error)

with tf.Session() as sess:
    sess.run(tf.global_variables_initializer())
    training_steps = 100

    for i in range(training_steps):
        sess.run(train)

    final_slope, final_intercept = sess.run([m, b])

    print(final_slope, final_intercept) # 0.7535087, 0.83729243

$(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%;
}

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>

绘制线条JavaScript-单击问题

1 个答案: