<!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':'test.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>
新建html文件，复制以上代码及以下测试图片：test.jpg，直接运行即可查看效果！！！！！
