Geek Answers Handbook

How can I prevent a quick mouse movement from breaking a line in my drawing application?

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

Problem . If you move the mouse very fast, it twitches and skips a few places. Is there a way to capture all the points without skipping black spaces between the line of the drawing?

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>
+5
source share
4 answers

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

The following object on this link contains the algorithm:

var drawer = new Drawer();

, - , . Bresenham .

+3

, .

+3

@kand, Canvas - .

div, , , , "", , , , Bresenham.

+2

More articles:


All Articles