js实现在画布上拖拽绘制元素

*Major*

已于 2023-07-29 22:03:10 修改

阅读量270

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-07-29 21:44:37 首次发布

本文链接：https://blog.csdn.net/qq_41375318/article/details/132000464

版权

js实现在画布上拖拽绘制元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button.active{
            color: #fff;
            background-color: blue;
        }
    
        #canv{
         width: 800px; 
         height: 600px;
         border: 1px solid black;
        }
    </style>


</head>
<body>
    
<div style="text-align:center;">
    <canvas id="canv" width="800px" height="600px"></canvas>
</div>
</body>

<script>

// 1.获取canvas画布和绘制对象
const canvas = document.querySelector('#canv')
const ctx = canvas.getContext('2d');

// 拖拽状态
const statusConfig = {
                IDLE:0,
                DRAG_START:1,
                DRAGGING:2,
                }

// 画布信息
const canvasInfo={
    status:statusConfig.IDLE, // 当前拖拽状态
    dragTarget :null, // 拖拽对象
    lastEvtPos:{x:null,y:null}, // 最后移动坐标
}

// 所有绘制对象列表
const circles = []

// 计算点与点之间的距离
const getDistance=(p1,p2) =>{
        return Math.sqrt((p1.x-p2.x)**2+(p1.y-p2.y)**2)
}

// 判断当前位置是否在圆内,如果在，则返回该绘制对象
const ifInCircle=(pos)=>{

    for(let i =0;i<circles.length;i++){
      if(getDistance(circles[i],pos)<circles[i].r)
      {
         return circles[i]
      }
    }

    return false
}

// 绘制圆
const drawCircle = (ctx,cx,cy,r)=>{
  ctx.save()
  ctx.beginPath();
  ctx.strokeStyle='blue';

  ctx.arc(cx,cy,r,0,Math.PI*2)

  ctx.stroke()
  ctx.closePath();
  ctx.restore();
}

// 绘制圆
drawCircle(ctx,100,100,50)
// 将圆添加进绘制对象列表
circles.push({
    x:100,
    y:100,
    r:50,
})

drawCircle(ctx,100,100,50)

circles.push({
    x:200,
    y:200,
    r:100,
})


drawCircle(ctx,200,200,100)

// 获取画布位置
const getCanvasPosition=e=>{
    return {
        x:e.offsetX,
        y:e.offsetY,
    }
}

// 对画布添加监听，鼠标点下事件
canvas.addEventListener('mousedown',e=>{
    // 获取当前点击下，的画布坐标
    const canvasPostion = getCanvasPosition(e)
    // 判断当前点击位置是否在圆内
    const circleRef = ifInCircle(canvasPostion)
    // 如果在圆内，则赋值拖拽对象，拖拽状态为开始拖拽，当前位置赋值为最后点击位置
    if(circleRef){
        // 赋值拖拽对象
        canvasInfo.dragTarget = circleRef
        canvasInfo.status = statusConfig.DRAG_START
        canvasInfo.lastEvtPos = canvasPostion
    }
})


// 对画布添加监听，鼠标移动事件
canvas.addEventListener('mousemove',e=>{
    // 获取当前画布位置
    const canvasPostion = getCanvasPosition(e)
    // 如果当前状态为开始拖拽状态并且移动距离大于5，则将拖拽状态设置为拖拽中
    if(canvasInfo.status == statusConfig.DRAG_START && getDistance(canvasPostion,canvasInfo.lastEvtPos) >5 ){
      console.log('try to drag')
      canvasInfo.status = statusConfig.DRAGGING
    }else if(canvasInfo.status === statusConfig.DRAGGING){
        // 拖拽状态为拖拽中，则开始拖拽
        console.log('dragging')
        const { dragTarget} = canvasInfo
        // 赋值拖拽对象位置，移动到当前鼠标移动位置
        dragTarget.x = canvasPostion.x
        dragTarget.y = canvasPostion.y
        // 清空画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        // 绘制所有 绘制对象
        circles.forEach(c=>drawCircle(ctx,c.x,c.y,c.r))
    }
})

// 对画布添加监听，鼠标抬起事件
canvas.addEventListener('mouseup',e=>{
    // 如果鼠标抬起，同时当前画布的状态是拖拽中，则将拖拽中状态置为闲置状态
    if(canvasInfo.status === statusConfig.DRAGGING){
        canvasInfo.status = statusConfig.IDLE
    }

})

</script>
</html>