用画布实现鼠标绘制可拖动可改变大小矩形框

本文链接：https://blog.csdn.net/boringsummers/article/details/87891011

网上找了一下用canvas实现鼠标绘制矩形框找到的都是需要用jQuery的，所以自己用js写了一个。效果图如下:
代码可能写的实在不算好，但是可以用，就当成一个demo来看吧。
实现原理的话和一般的鼠标拖动绘制矩形框(用div实现)原理差不多，计算鼠标的坐标点来减去画布距离网页窗口最左边以及最上边的距离以此为基点改变矩形框的大小，不同的是这里每帧都要把画布清空以及重绘这样最终看到的效果就是跟着鼠标的拖动矩形框在变化。
还有需要注意的一点是，要怎么实现判断鼠标是否在矩形框内。只有实现了判断方法才可以实现拖动以及改变矩形框的大小。实现方式是通过画布的一个API isPointInPath
API 所以我只要将鼠标相对于画布的坐标点这个参数传给 isPointInPath 我就可以在每次重绘画布的时候判断这个坐标点是否在画布的某一个矩形内部。

function reshow(x,y){
   
        layers.forEach(item=>{
   
            ctx.beginPath();
            ctx.rect(item.x1,item.y1,item.width,item.height);
            ctx.strokeStyle=item.strokeStyle
             
            if(ctx.isPointInPath(x*scale,y*scale)){
   
				render(item);//改变鼠标指针样式 可以做相关操作
            }
            ctx.stroke();
        })
}

这段代码是我的重绘函数，我把已经绘制的矩形的相关属性放在了layers这个数组里，每帧的重绘操作就是根据这个对象的描述重现这个矩形框，然后判断x,y是否在这个矩形框的路径上由此实现了判断鼠标是否在矩形框内。
下面是完整代码: github代码地址

<!DOCTYPE html>
<html>
<body>

<div style="width:1180px;height:800px;overflow:scroll;">
    <canvas id="myCanvas" width="1180" height="800" style="border:1px solid #d3d3d3;">
        Your browser does not support the HTML5 canvas tag.
    </canvas>
</div>
<button id="up">增大</button><button id="down">减小</button><button id="cancel">撤销</button><button id="clear">清空</button>
<script>
const c=document.getElementById("myCanvas");
const ctx=c.getContext("2d");
const scaleStep=1.05;
const minWidth=1180,minHeight=800,maxWidth=9000,maxHeight=7000;
const img=document.createElement('img');
const elementWidth=1180,elementHeight=800;
let startx,//起始x坐标
    starty,//起始y坐标
    flag,//是否点击鼠标的标志
    x,
    y,
    leftDistance,
    topDistance,
    op=0,//op操作类型 0 无操作 1 画矩形框 2 拖动矩形框
    scale=1,
	type=0;
let layers=[];//图层
let currentR;//当前点击的矩形框
img.src='xxx.png';
img.onload=function(){
   
    c.style.backgroundImage="url("+img.src+")";
    c.style.backgroundSize=`${
     c.width}px ${
     c.height}px`;
}
document.querySelector('#up').onclick=function(){
   
	if(c.width<=maxWidth&&c.height<=maxHeight){
   
		c.width*=scaleStep;
		c.height*=scaleStep;
		scale=c.height/minHeight;
		ctx.scale(scale,scale)
		c.style.backgroundSize=`${
     c.width}px ${
     c.height}px`;
		reshow()
	}
}
document.querySelector('#down').onclick=function(){
   
	if(c.width>=minWidth