Làm cách nào để ngăn chuyển động chuột nhanh chóng phá vỡ một dòng trong ứng dụng vẽ của tôi?

Question

tôi đang làm việc trên một kịch bản cho phép người dùng để vẽ với chuột: http://jsfiddle.net/ujMGu/

Vấn đề: Nếu bạn di chuyển con chuột thật nhanh nó giật và bỏ qua một vài nơi. Có cách nào để nắm bắt tất cả các điểm mà không có bất kỳ bỏ qua không gian màu đen ở giữa đường vẽ?

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> 

Answer 1

Kiểm tra này ra: http://jsfiddle.net/KodeKreachor/9DbP3/6/

Đối tượng sau vào liên kết được chứa các thuật toán:

var drawer = new Drawer(); 

Hãy cho tôi biết nếu bạn có bất kỳ câu hỏi nào về cách tôi đã làm điều đó. Tiền đề được dựa trên thuật toán dòng của Bresenham và phải tương thích với các trình duyệt cũ hơn.

Answer 2

Bạn sẽ cần phải theo dõi các điểm trước đó và sau đó vẽ một đường thẳng giữa điểm mới và điểm trước đó.

Answer 3

Tại sao không sử dụng canvas? Nó có một số tiện ích dòng vẽ:

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

Answer 4

Như @kand đã đề cập, Canvas thực sự là công cụ tốt nhất để vẽ.

Nếu bạn phải sử dụng phương pháp div hoặc nếu điều này chỉ để giải trí, bạn có thể mở rộng phương pháp của mình bằng cách lưu vị trí chuột trước đó và sau đó vẽ "pixel" xen kẽ cần thiết để hoàn thành dòng bằng cách sử dụng, ví dụ: Bresenham's line algorithm .