How can I prevent fast mouse movement from breaking a line in my drawing app?

问题

I'm working on a script that allows the user to draw with the mouse: http://jsfiddle.net/ujMGu/

The problem: If you move the mouse really fast it jerks and skips a few places. Is there any way to capture all the points without any skipping black spaces in between the drawing line?

CSS

#myid{background: none repeat scroll 0 0 #000000;
    color: #FFFFFF;
    display: block;
    height: 1000px;
    margin: 3%;
    position: relative;
    text-indent: -1100px;}

JS/JQ

$('#myid')
.css('position','relative')
.unbind().die()
.bind('mousemove mouseover',function (e){
var top = parseInt(e.pageY)-$(this).offset().top;
var left= parseInt(e.pageX)-$(this).offset().left;
var pixel= $('<div></div>')
  .css({
      width:10,height:10,
      background: '#fff',
      position:'absolute',
      top: top, left: left,
      'border-radius': 2
  });
  $(this).append(pixel);
});

HTML

<div id="myid"></div>

回答1:

Check this out: http://jsfiddle.net/KodeKreachor/9DbP3/6/

The following object on the given link contains the algorithm:

var drawer = new Drawer();

Let me know if you have any questions as to how I did it. The premise is based on Bresenham's line algorithm and should be compatible in older browsers as well.

回答2:

You would need to keep track of the previous point and then draw a line between the new point and the previous.

回答3:

Why not use canvas? It has a number of line drawing utilities:

http://www.w3schools.com/html5/html5_ref_canvas.asp

回答4:

As @kand has mentioned, a Canvas is really the best tool for drawing.

If you must use your div method, or if this is just for fun, you can extend your approach by saving the previous mouse position and then draw the intervening "pixels" needed to complete the line using, for example, Bresenham's line algorithm.

来源：https://stackoverflow.com/questions/9587843/how-can-i-prevent-fast-mouse-movement-from-breaking-a-line-in-my-drawing-app

标签

javascript

jquery

html

css

cursor