js鼠标如何锁定鼠标移动范围

jsbuzhidao 2018-03-17 07:59:55

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
canvas{
background: #aaaaaa;
margin: 50px;;
}
</style>
</head>
<body >
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
<script>
window.onload = function(e) {
var canvas =document.getElementById('canvas'),
ctx = canvas.getContext('2d');
var m_bMouseDown = false;
var m_ptMouseDown = {}; //鼠标按下的位置
var m_ptMousePos = {}; //鼠标当前的位置
//按下
canvas.onmousedown = function(e) {
m_bMouseDown = true;
var point = ClientToScreen(canvas, e.clientX, e.clientY);
m_ptMouseDown = point;
}
//抬起
canvas.onmouseup = function(e) {
m_bMouseDown = false;
}
//鼠标移动到画布外放开鼠标,
document.onmouseup = function(e) {
m_bMouseDown = false;
}
//移动
canvas.onmousemove = function(e) {
if(m_bMouseDown){
ctx.clearRect(0, 0, canvas.width, canvas.height);
var point = ClientToScreen(canvas, e.clientX, e.clientY);
m_ptMousePos = point;
var left = Math.min(m_ptMouseDown.x, m_ptMousePos.x),
right = Math.max(m_ptMouseDown.x, m_ptMousePos.x),
top = Math.min(m_ptMouseDown.y, m_ptMousePos.y),
bottom = Math.max(m_ptMouseDown.y, m_ptMousePos.y);
ctx.beginPath();
ctx.moveTo(left, top);
ctx.lineTo(right, top)
ctx.lineTo(right, bottom)
ctx.lineTo(left, bottom)
ctx.lineTo(left, top)
ctx.strokeStyle = 'red';
ctx.lineWidth = 2;
ctx.closePath();
ctx.stroke();
}
}
function ClientToScreen(canvas, x, y){
var rect = canvas.getBoundingClientRect();
return {
x: x - rect.left * (canvas.width / rect.width),
y: y - rect.top * (canvas.height / rect.height)
};
}
}
</script>

这是简单的鼠标拖动画一个矩形的效果,请问按住鼠标拖动的时候,如何限制在canvas内呢,即不让鼠标移动到画布范围外.
如鼠标移动到外面放开,除document.onmouseup外,还有其他方法吗
谢谢
...全文
1070 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
天际的海浪 2018-03-18
  • 打赏
  • 举报
回复
引用 2 楼 jsbuzhidao 的回复:
[quote=引用 1 楼 showbo 的回复:] onmousemove的时候判断在你的范围内在绘制图片不就好了,限制鼠标移动范围是不可能的
你好,通过这计算是可以达到效果,但是我看C++好像有可以锁定鼠标的,就是在范围内鼠标不松开都移动不出去 所以想问下有没有大牛有什么方法或插件可用的 [/quote] C++可以锁定鼠标,是因为C++做出来的是真正的应用程序,应用程序的权限非常高,几乎什么都可以做。 但浏览器中的html页面有很多安全限制,不要和真正的应用程序比。
jsbuzhidao 2018-03-17
  • 打赏
  • 举报
回复
引用 1 楼 showbo 的回复:
onmousemove的时候判断在你的范围内在绘制图片不就好了,限制鼠标移动范围是不可能的
你好,通过这计算是可以达到效果,但是我看C++好像有可以锁定鼠标的,就是在范围内鼠标不松开都移动不出去 所以想问下有没有大牛有什么方法或插件可用的
Go 旅城通票 2018-03-17
  • 打赏
  • 举报
回复
onmousemove的时候判断在你的范围内在绘制图片不就好了,限制鼠标移动范围是不可能的

Web开发学习资料推荐
配置chrome支持本地(file协议)ajax请求
jQuery dataType指定为json注意事项

87,884

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧