canvas画布中的元素响应鼠标交互

马黑黑 · 发表于 2022-8-25 13:43

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

canvas画布中可以拥有很多绘制的元素，掌握这些元素响应鼠标的动作交互很有意义，是画布深入开发的必备基础。

本帖以画布中的矩形为例，初探画布上的元素响应鼠标动作交互的实现机制，意在举一反三。矩形是最简单的，尤其是在判断指针是否经过它时。

预想是，画布上绘制的小矩形图像，能够发现鼠标经过它，并作出响应动作。响应方式我们尽量简化：鼠标指针变为手型、自身颜色发生变化。

准备工作：在页面上布局画布。CSS和HTML代码如下：

<style>
#canv { margin: auto; display: block; position: relative; border: 1px solid; }
</style>

<canvas id="canv"></canvas>

开始用JS脚本去实现预设功能。先声明相关变量：

let ctx = canv.getContext('2d'), //画笔
w = canv.width = 740, //画布宽度
h = canv.height = 460, //画布高度
box = { x: 10, y: 10, width: 60, height: 40, color: 'olive' }; //矩形实体化对象

给 box 对象添加一个绘制函数，方便反复调用：

box.draw = function() {
ctx.fillStyle = this.color; //填充颜色
ctx.fillRect(this.x, this.y, this.width, this.height); //画矩形
}

然后运行一次上述函数（也可以稍后一点再运行），让矩形在打开页面时在画布上出现：

box.draw();

接着是重点问题，写一个函数判断鼠标在画布上移动时是否经过上述矩形，函数依然属于 box 对象的一个方法：

box.isBox = function(x,y) {
return (this.x <= x && this.x + this.width >= x && this.y <= y && this.y + this.height >= y);
}

上面的函数需要两个参数，x和y，这两个参数指向鼠标指针移动时的实时xy坐标值，然后拿这个坐标值分别与矩形的xy坐标以及xy坐标+宽、高的和进行比较，返回如下的比较结果：矩形的X坐标值小于等于x、并且矩形的X坐标值+其宽度大于等于x、并且矩形的Y坐标小于等于y、并且矩形的Y坐标值+其高度等于等于y。这个比较结果如果一齐成立，则鼠标指针在矩形范围里，否则不是。

最后编写监听画布上鼠标移动的函数，它将调用上面的判断鼠标指针是否在矩形之上的函数：

canv.addEventListener('mousemove', function(e) {
let ex = e.offsetX, ey = e.offsetY; //获取鼠标xy坐标并赋值给变量 ex、ey
if (box.isBox(ex,ey)) { //调用判断函数，如果函数返回真，则——
this.style.cursor = 'pointer'; //鼠标指针为手型
box.color = 'red'; //矩形填充色为红色
box.draw(); //重新绘制矩形
   } else { //否则——
     this.style.cursor = 'default'; //鼠标指针为默认
     box.color = 'olive'; //颜色回到初始色
     box.draw(); //重新绘制矩形
   }
});

这是监听整个画布的鼠标移动事件，或许我们需要一个处理机制，以避免过渡的矩形重绘，作为初探，这里就不整那么复杂的了。

实现了上述响应功能，可扩展的机会也就有了，画布上基于响应机制的更为丰富的功能也就有了实现的可能。

马黑黑 · 发表于 2022-8-25 13:45

马黑黑 · 发表于 2022-8-25 13:45

二楼代码：

<style>
#canv { margin: auto; display: block; position: relative; border: 1px solid; }
</style>
<canvas id="canv"></canvas>
<script>
let ctx = canv.getContext('2d'),
w = canv.width = 740,
h = canv.height = 460,
box = { x: 10, y: 10, width: 60, height: 40, color: 'olive' };
box.draw = function() {
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
box.draw();
box.isBox = function(x,y) {
return (this.x <= x && this.x + this.width >= x && this.y <= y && this.y + this.height >= y);
}
canv.addEventListener('mousemove', function(e) {
let ex = e.offsetX, ey = e.offsetY;
if (box.isBox(ex,ey)) {
this.style.cursor = 'pointer';
box.color = 'red';
box.draw();
} else {
this.style.cursor = 'default';
box.color = 'olive';
box.draw();
}
});
</script>