缩放图像后的鼠标位置(比率X/比率Y)

Question

如果单击鼠标，图像将被裁剪为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);

但是当我将图像缩放添加到绘图图像(比率X/比率Y(时

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(

我试图将比率X/ratioY添加到鼠标的位置，但没有帮助。我还使用指针单击来控制鼠标位置。

有什么想法吗？

Answer 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);