Question

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

问题：如果您快速移动鼠标，它会猛然跳过几个地方。有没有办法在绘图线之间没有任何跳过黑色空格的情况下捕获所有点？

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

您需要跟踪上一个点，然后在新点和上一个点之间画一条线。

Answer 2

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

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

var drawer = new Drawer();

如果您对我的表现有任何疑问，请与我们联系。前提是基于Bresenham的线算法，并且应该在旧版浏览器中兼容。

Answer 3

为什么不使用帆布？它有许多线条画工具：

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

Answer 4

正如@kand所提到的，Canvas真的是最好的绘图工具。

如果您必须使用div方法，或者这只是为了好玩，您可以通过保存先前的鼠标位置来扩展您的方法，然后绘制完成该行所需的插入“像素”，用于例如，Bresenham's line algorithm。

如何防止快速鼠标移动在我的绘图应用程序中断行？

4 个答案: