web前端入门（四）-canvas图形拖拽事件

最新推荐文章于 2025-02-11 14:28:49 发布

原创

最新推荐文章于 2025-02-11 14:28:49 发布 · 2.6k 阅读

13 ·

CC 4.0 BY-SA版权

本文介绍了在Canvas中实现图形拖拽的原理和步骤，包括鼠标拖拽单个及重叠图形的处理方法。通过监听mousedown、mousemove事件，判断鼠标点击位置并清除重绘图形，实现拖拽效果。对于多个重叠图形，提出了在同一canvas处理和每个图形独立canvas的两种解决方案。

概述

在 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 中的图形，并在鼠标当前位置重新绘制。

 $(document).mousemove(function (e) {
        if(bDrag)
        {
            var $item=$("#"+cur

最低0.47元/天解锁文章