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

但是当我将图像缩放添加到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控制鼠标位置。

有什么想法吗？

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

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

1 个答案: