求助.. JS 画本画出的线不连贯鼠标移动快了会变成虚线.如何解决.

j1a2b3c 2009-06-12 12:57:43

<html>
<head>
<title>js实现图画本功能</title>
<style>
.d{width:3px;height:3px;font-size:1px;border:0;z-

index:1;position:absolute;display:inline;visibility:visible;}
</style>
<script>
var C='red';
function $(o){return document.getElementById(o);}
function d(x,y,o){
o=document.createElement("DIV");
o.className='d';
o.style.left=x;
o.style.top=y;
o.style.background=C;
$('dWindow').appendChild(o);
}

function fDel(){$('dWindow').innerHTML='';}
function fDblClk(e){}
function fClk(e){}
function fDown(e,x,y){x=e.clientX;y=e.clientY;if(x==l&&y==t)return;l=x;t=y;d(x,y);}
function fUp(e){fDown(e);}
function fMove(e,x,y)
{
if(e.button!=1||l<0||t<0) return;
x=e.clientX;y=e.clientY;
d(x,y);
/*
j=x-l;k=t-y;
if(j>k)
m=j/k;

if(x<l){
if(y<t){n=0;}
else if(y==t){n=0;for(i=l-1;i>x;i--)d(i,t);}
else if(y>t){n=0;}
}
else if(x==l){
if(y<t){n=0;for(i=t-1;i>y;i--)d(l,i);}
else if(y==t){n++;for(i=l-n;i<=l+n;i++)d(i,t-n);for(i=l-n;i<=l+n;i++)d(i,t+n);for

(i=t-n+1;i<=t+n-1;i++)d(l-n,i);for(i=t-n+1;i<=t+n-1;i++)d(l+n,i);}
else if(y>t){n=0;for(i=t+1;i<y;i++)d(l,i);}
}
else if(x>l){
if(y<t){n=0;j=x-l;k=t-y;m=j/k;)}
else if(y==t){n=0;for(i=l+1;i<x;i++)d(i,t);}
else if(y>t){n=0;}
}
*/
}var n,l=-1,t=-1;
function fOver(e){}
function fOut(e){}
</script>
</head>
<body style="margin:0px;">

<table style="width:100%;height:100%;">
<tr><td height=12><div style="border-bottom:1px solid #aaa;background:#eee;">
<input type=button value=清空 onclick=fDel()><input type=button value=查看 onclick=alert

(document.body.innerHTML);>
</div></td></tr>
<tr><td><div style="border:0px solid #000;height:100%;background:#fff;">
<div id=dWindow style="height:100%;" onclick=fClk(event) onmouseDown=fDown(event)

onmouseMove=fMove(event)></div>
</div></td></tr>
</table>

</body>
</html>

以上是源码鼠标移动稍快就会变为虚线... 不知道怎么回事
有没高手帮忙解决下....!

...全文

275 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

cloudgamer 2009-06-12

打赏
举报

先画点1
然后画点2的时候
顺便从1到2画一条直线

sunxing007 2009-06-12

打赏
举报

[Quote=引用 2 楼 sunxing007 的回复:]
我也遇到过，我觉得是这样的
鼠标移动触发onmousemove, 但是当快速移动鼠标的时候
在极短的时间内触发的onmousemove次数有限。
我觉得一个解决办法是判断两次鼠标的位置的距离，
如果太短，就插值修正。
可以看看不久前我写的简单的js绘图：
http://blog.csdn.net/sunxing007/archive/2009/04/23/4103787.aspx
其中画圆的时候，本来是把圆周360等分画360个点，后来发现
随着圆周增大，画出来的圆就断开了，于…
[/Quote]
我说错了一点，应该是“如果太长，就插值修正。”

monexus 2009-06-12

打赏
举报

这个没法解决的，事件处理有些延迟的，一快就不行了

j1a2b3c 2009-06-12

打赏
举报

那我想当触发一次ONMOUSMOVE的时候就不断的调用N次画图那个方法...

刚用递归做了下有错.. 搞不懂了...

sunxing007 2009-06-12

打赏
举报

我也遇到过，我觉得是这样的
鼠标移动触发onmousemove, 但是当快速移动鼠标的时候
在极短的时间内触发的onmousemove次数有限。
我觉得一个解决办法是判断两次鼠标的位置的距离，
如果太短，就插值修正。
可以看看不久前我写的简单的js绘图：
http://blog.csdn.net/sunxing007/archive/2009/04/23/4103787.aspx
其中画圆的时候，本来是把圆周360等分画360个点，后来发现
随着圆周增大，画出来的圆就断开了，于是作了以下修正，你可以参考一下。

j1a2b3c 2009-06-12