概述
在 canvas 中绘制图形后,可以给 canvas 添加事件响应函数,并判断事件是否发生在canvas内部所绘制的图形中,从而给 canvas 中绘制图形添加事件处理。
很多情况下有鼠标拖拽图形的需求,如果是单个图形、不重叠图形,鼠标拖拽功能还较易实现。但在 canvas 中有图形存在重叠的情况下,鼠标点击的图形以及绘制区域的清除等操作,都不容易实现。此文首先讲解基本的鼠标拖拽功能的实现,再进一步说明如何处理 canvas 图形重叠时的鼠标拖拽功能。
鼠标拖拽canvas中的图形
要实现鼠标拖拽 canvas 中的图形功能,整个逻辑为:
- canvas响应 mousedown 事件,判断鼠标点击点是否在canvas绘制的图形内,如不在则不处理;
- 用一个全局变量标记当前为拖拽状态,并记录被点击图形当前位置和鼠标当前位置。
var curMouseX;//记录当前鼠标X坐标
var curMouseY;//记录当前鼠标Y坐标
var curId;//当前被拖拽的图形所属的 canvas 的ID;
if(ctx.isPointInPath(e.clientX-$(this).offset().left,e.clientY-$(this).offset().top))//需要计算鼠标在canvas中的位置
{
bDrag=true;
curId=$(this).attr("id");
return false;
}
- document 监听 mousemove 事件,清除 canvas 中的图形,并在鼠标