canvas中drawImage通过鼠标控制图片缩放速度问题？ - 星点互联edus视频培训演示站

var canvas, context;
var imageWidth, imageHeight;
var img,//图片对象
imgIsLoaded,//图片是否加载完成;
imgX = 0,
imgY = 0,
imgScale = 1;
function loadImg() {
img = new Image();
img.onload = function () {
imgIsLoaded = true;
imgX = (canvas.width - img.width) / 2;
imgY = (canvas.height - img.height) / 2
drawImage();
}
img.src = 'http://127.0.0.1:52409/%E4%B8%89%E5%93%A5%E5%B0%8F%E8%88%9E.jpeg';
}
function drawImage() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(
img, //规定要使用的图像、画布或视频。
0, 0, //开始剪切的 x 坐标位置。
img.width, img.height, //被剪切图像的高度。
imgX, imgY,//在画布上放置图像的 x 、y坐标位置。
img.width * imgScale, img.height * imgScale //要使用的图像的宽度、高度
);
canvasEventsInit()
}
/*事件注册*/
function canvasEventsInit() {
canvas.onmousedown = function (event) {
var pos = windowToCanvas(event.clientX, event.clientY); //坐标转换，将窗口坐标转换成canvas的坐标
canvas.onmousemove = function (evt) { //移动
canvas.style.cursor = 'move';
var posl = windowToCanvas(evt.clientX, evt.clientY);
var x = posl.x - pos.x;
var y = posl.y - pos.y;
pos = posl;
imgX += x;
imgY += y;
drawImage(); //重新绘制图片
};
canvas.onmouseup = function () {
canvas.onmousemove = null;
canvas.onmouseup = null;
canvas.style.cursor = 'default';
};
};
canvas.onmousewheel = canvas.onwheel = function (event) { //滚轮放大缩小
var pos = windowToCanvas(event.clientX, event.clientY);
event.wheelDelta = event.wheelDelta ? event.wheelDelta : (event.deltalY * (-40)); //获取当前鼠标的滚动情况
if (event.wheelDelta > 0) {
imgScale *= 2;
imgX = imgX * 2 - pos.x;
imgY = imgY * 2 - pos.y;
} else {
imgScale /= 2;
imgX = imgX * 0.5 + pos.x * 0.5;
imgY = imgY * 0.5 + pos.y * 0.5;
}
drawImage(); //重新绘制图片
};
}
/*坐标转换*/
function windowToCanvas(x, y) {
var box = canvas.getBoundingClientRect(); //这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离
return {
x: x - box.left - (box.width - canvas.width) / 2,
y: y - box.top - (box.height - canvas.height) / 2
};
}
(function int() {
canvas = document.getElementById('canvas'); //画布对象
canvas.width = canvas.getBoundingClientRect().width;
canvas.height = canvas.getBoundingClientRect().height;
context = canvas.getContext('2d');//画布显示二维图片
loadImg();
})();

复制代码

canvas.onmousewheel = canvas.onwheel = function (event) { //滚轮放大缩小
var pos = windowToCanvas(event.clientX, event.clientY);
event.wheelDelta = event.wheelDelta ? event.wheelDelta : (event.deltalY * (-40)); //获取当前鼠标的滚动情况
if (event.wheelDelta > 0) {
imgScale *= 2;
imgX = imgX * 2 - pos.x;
imgY = imgY * 2 - pos.y;
} else {
imgScale /= 2;
imgX = imgX * 0.5 + pos.x * 0.5;
imgY = imgY * 0.5 + pos.y * 0.5;
}
drawImage(); //重新绘制图片
};

复制代码

var pos = windowToCanvas(event.clientX, event.clientY);
var n = 1.1;
var n2 = (1/1.1).toFixed(2);
event.wheelDelta = event.wheelDelta ? event.wheelDelta : (event.deltalY * (-40)); //获取当前鼠标的滚动情况
if (event.wheelDelta > 0) {
imgScale *= n;
imgX = imgX * n - pos.x * (n-1);
imgY = imgY * n - pos.y * (n-1);
} else {
imgScale *= n2;
imgX = imgX *n2+ pos.x *(1-n2);
imgY = imgY *n2 + pos.y *(1-n2);
}
console.log(imgScale)
drawImage(); //重新绘制图片
};

复制代码