如何解决当我用鼠标移动图像时,如何获得图像的X和I?
我有一个图像,可以通过在鼠标上拖动来在画布中移动,可以获取鼠标坐标,但是我真正想要的是获取图像的坐标。
我已经尝试过使用getBoundingClientRect()函数,但是它只返回原始 图片的位置。
当鼠标事件为“ mouseup”时,我不知道如何获取图像的当前位置
let position = img.getBoundingClientRect();
console.log(position.top,position.left);
document.getElementById("inp").onchange = function(e) {
img = new Image();
img.onload = draw;
img.onerror = failed;
img.src = URL.createObjectURL(this.files[0]);
}
function draw() {
ctx.drawImage(this,0);
var down = false;
canvas.addEventListener(
"load",function () {
for (let i = 0; i < cuadros.length; i++) {
cuadros[i].draw();
}
docker.draw();
},false
);
canvas.addEventListener(
"mousedown",function() {
down = true;
var punto_de_agarre = oMousePos(canvas,event);
dx -= punto_de_agarre.x;
dy -= punto_de_agarre.y;
},false
);
canvas.addEventListener(
"mouseup",function() {
down = false;
m = oMousePos(canvas,event);
dx += m.x;
dy += m.y;
let position = img.getBoundingClientRect();
console.log(position.top,position.left);
},false
);
canvas.addEventListener(
"mousemove",function(event) {
if (down) {
clear();
m = oMousePos(canvas,event);
ctx.drawImage(img,m.x + dx,m.y + dy);
}
for (let i = 0; i < cuadros.length; i++) {
cuadros[i].draw();
}
docker.draw();
},false
);
function clear() {
ctx.clearRect(0,canvas.width,canvas.height);
}
}
function failed() {
console.error(
"El archivo proporcionado no se pudo cargar como un medio de imagen"
);
}
function oMousePos(canvas,evt) {
let ClientRect = canvas.getBoundingClientRect();
return {
// Objeto
x: Math.round(evt.clientX - ClientRect.left),y: Math.round(evt.clientY - ClientRect.top)
};
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。