如何防止快速鼠标移动在我的绘图应用程序中断线？ [英] How can I prevent fast mouse movement from breaking a line in my drawing app?

问题描述

我正在编写一个允许用户使用鼠标绘制的脚本：
http：// jsfiddle.net/ujMGu/

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

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>

推荐答案

检查： http://jsfiddle.net/KodeKreachor/9DbP3/6/

给定链接上的以下对象包含算法：

The following object on the given link contains the algorithm:

var drawer = new Drawer();

让我知道如果你对我有什么问题。前提是基于Bresenham的行算法，并且应该在旧版浏览器中兼容。

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.

这篇关于如何防止快速鼠标移动在我的绘图应用程序中断线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！