canvas 实现图片拖拽，缩放功能

最新推荐文章于 2024-09-06 17:26:24 发布

庞各庄学霸

最新推荐文章于 2024-09-06 17:26:24 发布

阅读量3.3k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_41085315/article/details/102647028

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas图片实现拖拽缩放功能</title>
    <style>
        body,div{
            margin:0;
            padding:0;
        }
        #d1{
            width:800px;
            height: 800px;
            border: 2px solid #00FFD1;
            display: inline-block;
        }
    </style>
</head>
<body>


<div id="d1">
    <canvas id="myCanvas">
        <p>您的系统不支持此程序!</p>
    </canvas>
</div>
<script>
	// bounder 边界宽度，用来识别是缩放还是拖拽；canvasW画布宽度；canvasH画布高度
	var bounder = 7,canvasW = 800,canvasH = 800;
    const canva=document.getElementById("myCanvas");
    const cansText=canva.getContext("2d");
    canva.width = canvasW;
    canva.height = canvasH;

	// 图片对象
	var image1 = {
		'img':undefined,  // 保存图片对象
		'src':'0.jpg',  // 图片路径
		'x':50,  // 图片左上角x坐标
		'y':50, // 图片左上角y坐标
		'width':150, // 用来绘制的宽度（注意不是图片自身的宽度，图片会被压缩显示）
		'height':100, //  用来绘制图片的高度
		'drag':false, // 是否处于拖拽状态
		'scale':false, // 是否处于缩放状态
		'scaleDirection':'', // 缩放方向
	};
	//加载
    loadimage = function(obj){
    	let image = new Image();
	    image.onload = function () {
	    	cansText.drawImage(image,obj.x,obj.y,obj.width,obj.height);
	    	obj.image = image;
	    }
	    image.src=obj.src;
	    
	}
	// 加载图片
    loadimage(image1);
    // 监听鼠标按下事件
 	onmousedown = function (e) {
 		let mousex = e.clientX;
 		let mousey = e.clientY;
 		let bottom = image1.y+image1.height;
 		let top = image1.y;
 		let left = image1.x;
 		let right = image1.x + image1.width;
 		// 判断是缩放还是拖拽，若点击位置和边线的差大于bounder则认为是拖拽，否则是缩放
 		if((left+bounder<=mousex && mousex<=right-bounder) && (top+bounder<=mousey && mousey<=bottom-bounder)){
 			image1.drag = true;
 			image1.scale = false;
 			image1.scaleDirection = '';
 		}else if(0<=mousex-left && mousex-left<=bounder){
 			image1.scaleDirection = 'left';
 			image1.scale = true;
 			image1.drag = false;
 		}else if (0<=right-mousex && right-mousex<=bounder) {
 			image1.scaleDirection = 'right';
 			image1.scale = true;
 			image1.drag = false;
 		}
 		if(0<=mousey-top && mousey-top<=bounder){
 			image1.scaleDirection += 'top';
 			image1.scale = true;
 			image1.drag = false;
 		}else if( 0<=bottom-mousey && bottom-mousey<=bounder){
 			image1.scaleDirection += 'bottom';
 			image1.scale = true;
 			image1.drag = false;
 		}

 	}
 	// 鼠标弹起，重置所有事件参数
 	onmouseup = function (e) {
 		// body...
 		image1.drag = false;
 		image1.scale = false;
 		image1.scaleDirection = ''
 	}
 	// 鼠标移动事件
 	onmousemove = function (e) {
 		// body...
 		let mousex = e.clientX;
 		let mousey = e.clientY;
 		// 鼠标移除canvas区域
 		if(mousex<0 || mousex>canvasW || mousey<0 || mousey>canvasH){
 			image1.drag = false;
 			image1.scale = false;
 		};
 		// 移动
 		if(image1.drag){
 				
	 			if(e.movementX || e.movementY){
	 				let tem_imgx = image1.x + e.movementX;
 					let tem_imgy = image1.y + e.movementY;
	 				if((0<tem_imgx && tem_imgx<canvasW-image1.width) && (0<tem_imgy && tem_imgy<canvasH-image1.height)) {
		 				cansText.clearRect(image1.x,image1.y,image1.width,image1.height);
		 				image1.x = tem_imgx;
		 				image1.y = tem_imgy;
		 				cansText.drawImage(image1.image,image1.x,image1.y,image1.width,image1.height);
	 				
	 				};
	 			};

 		};
 		//缩放
 		if(image1.scale){
 			if(e.movementX || e.movementY){
 				cansText.clearRect(image1.x,image1.y,image1.width,image1.height);
	 			let movex = e.movementX;
	 			let movey = e.movementY;
	 			if(movex!=0 || movey!=0){
	 				
	 				//根据x缩放方向判断固定点
	 				if(image1.scaleDirection.search('right')!=-1){
	 					image1.width += movex;
	 				}else if(image1.scaleDirection.search('left')!=-1){
	 					image1.x +=movex;
	 					image1.width -= movex;
	 				}
	 				if(image1.scaleDirection.search('bottom')!=-1){
	 					image1.height += movey;
	 				}else if(image1.scaleDirection.search('top')!=-1){
	 					image1.height -= movey;
	 					image1.y += movey;
	 				}				
 				cansText.drawImage(image1.image,image1.x,image1.y,image1.width,image1.height);
 			};
 		};
 	}
 }	
</script>
</body>
</html>

下测试图片：test.jpg，直接运行即可查看效果！！！！！