缩放图像后的鼠标位置（ratioX/ratioY）答案

【问题标题】：Mouse position after scaling image (ratioX/ratioY)缩放图像后的鼠标位置（ratioX/ratioY）
【发布时间】：2018-03-17 17:50:00
【问题描述】：

如果你点击鼠标，图像将被Y鼠标的位置裁剪：https://jsfiddle.net/1mL9qfmd/2/（gif：http://wgrajo.pl/img/ezgif4baa2da6575.gif）

html:

<canvas id="game" width="640" height="480" style="position: absolute; left:0px; top:0px; border:1px red solid;"></canvas>

javascript：

var img = new Image;
    img.src = 'http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg';
var ctx = game.getContext('2d');
var ratioX = 2700/2300;
var ratioY = 1300/1080;
var cutY = 87;
var mouse = {y: 0, x: 0};

setInterval(function(){
   ctx.clearRect(0,0,game.width, game.height);
   ctx.drawImage(img, 0,0, img.width, img.height-cutY, 0, 0, img.width, img.height-cutY);
},1000/60);

window.addEventListener('mousedown', function(e){
   mouse.y = e.pageY;
   mouse.x = e.pageX;

   cutY = Math.abs(img.height-mouse.y);
}, false);

但是当我将图像缩放添加到 drawImage (ratioX / ratioY)

ctx.drawImage(img, 0,0, img.width, img.height-cutY, 0, 0, img.width*ratioX, (img.height-cutY)*ratioY);

它不能正常工作，看（点击图片）：https://jsfiddle.net/1mL9qfmd/4/（gif：http://wgrajo.pl/img/ezgif48510c879ec.gif）

我尝试将 ratioX / ratioY 添加到鼠标的位置，但没有帮助。我还使用 PointerClick 来控制鼠标位置。

有什么想法吗？

【问题讨论】：

标签： javascript html5-canvas position mouse scale

【解决方案1】：

好的，我解决了https://jsfiddle.net/1mL9qfmd/11/。

html:

<canvas id="game" width="640" height="480" style="position: absolute; left:0px; top:0px; border:1px red solid;"></canvas>

javascript：

var img = new Image;
img.src = 'http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg';
var ctx = game.getContext('2d');
var ratioX = 2700/2300;
var ratioY = 1300/1080;
var cutY = 70;
var mouse = {y: 0, x: 0};
var distance = 0;
setInterval(function(){
   ctx.clearRect(0,0,game.width, game.height);                               
   ctx.drawImage(img, 0,0, img.width, (img.height-cutY)-distance/ratioY, 0, 0, img.width*ratioX, (img.height-cutY-distance/ratioY)*ratioY);
},1000/60);

window.addEventListener('mousemove', function(e){
   mouse.y = e.pageY;
   mouse.x = e.pageX;
}, false);

window.addEventListener('mousedown', function(e){
   distance = Math.abs(mouse.y-mouse.y*ratioY);
   cutY = img.height-(mouse.y);
}, false);

【讨论】：