缩放图像后的鼠标位置(比率/比率)
If you click the mouse, the image will be cropped by the position of the Y mouse: https://jsfiddle.net/1mL9qfmd/2/ (gif: http://wgrajo.pl/img/ezgif4baa2da6575.gif)
如果单击鼠标,图像将根据Y鼠标的位置进行裁剪:https://jsfiddle.net/1mL9qfmd/2/ (gif: http://wgrajo.pl/img/ezgif4ba2da6575.gif)
html:
html:
<canvas id="game" width="640" height="480" style="position: absolute; left:0px; top:0px; border:1px red solid;"></canvas>
javascript:
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);
But when I add image scaling to drawImage (ratioX / ratioY)
但是当我给drawImage添加图像缩放(ratioX / ratioY)
ctx.drawImage(img, 0,0, img.width, img.height-cutY, 0, 0, img.width*ratioX, (img.height-cutY)*ratioY);
It does not work correctly, look (click on the image): https://jsfiddle.net/1mL9qfmd/4/ (gif: http://wgrajo.pl/img/ezgif48510c879ec.gif)
它不能正确工作,看(点击图片):https://jsfiddle.net/1mL9qfmd/4/ (gif: http://wgrajo.pl/img/ezgif48510c879ec.gif)
I tried to add ratioX / ratioY to the position of the mouse, but it does not help. I used also PointerClick to control mouse position.
我试图在老鼠的位置上加上ratioX / ratioY,但没有用。我还使用PointerClick来控制鼠标的位置。
Any ideas?
什么好主意吗?
1 个解决方案
#1
0
Ok i solved it https://jsfiddle.net/1mL9qfmd/11/.
我解决了https://jsfiddle.net/1mL9qfmd/11/。
html:
html:
<canvas id="game" width="640" height="480" style="position: absolute; left:0px; top:0px; border:1px red solid;"></canvas>
javascript:
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);
更多相关文章
- 在透明背景PNG周围获得“方形”框阴影。如何在图像周围弯曲css阴
- 每次在HTML5中加载静态图像
- 从屏幕外动画div,没有绝对位置?
- Javascript来自数据库的图像上的图像映射
- python 简单图像处理(2) 镜像
- 通过分隔符计数和位置从数据框中提取特定文本
- python 按位置关系输出矩阵元素
- caffe python批量抽取图像特征
- 在Python中显示来自控制台的图像