Как получить верхнюю левую координату изображения на холсте после перевода?

У меня вопрос, как получить координату верхнего левого угла изображения после перевода изображения на холст? Я хочу сделать область изображения доступной для выбора, оставив пустое пространство недоступным для выбора, но без этого невозможно выполнить условие того, находится ли мышь в пределах диапазона изображения или нет.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var position = {
    start : {
        x : 0,
        y : 0
    },
    end : {
        x : 0,
        y : 0
    }
};
var imagePos = {
    x : 0,
    y : 0
};
var img = document.getElementById('img');
ctx.drawImage(img, 0, 0);
var drag = false, selected = false;

canvas.addEventListener('mousedown', mouseDown);
window.addEventListener('mouseup', mouseUp);

function mouseDown(p) {
    window.addEventListener('mousemove', moveImg);
    position.start.x = p.pageX - canvas.getBoundingClientRect().left;
    position.start.y = p.pageY - canvas.getBoundingClientRect().top;
    drag = true;

    if (position.start.x >= imagePos.x && position.start.x <= (imagePos.x + img.width) && position.start.y >= imagePos.y && position.start.y <= (imagePos.y + img.height)) {
        selected = true;
    } else {
        selected = false;
    }
}

function mouseUp() {
    window.removeEventListener('mousemove', moveImg);
    selected = false;
}

function moveImg(p) {
    document.getElementById('mouse').innerHTML = 'MouseX: ' + parseInt(p.pageX - canvas.getBoundingClientRect().left) + '/ MouseY: ' + parseInt(p.pageY - canvas.getBoundingClientRect().top);

    if (drag && selected) {
        position.end.x = p.pageX - canvas.getBoundingClientRect().left;
        position.end.y = p.pageY - canvas.getBoundingClientRect().top;

        var x = position.end.x - position.start.x;
        var y = position.end.y - position.start.y;

        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.translate(x, y);
        ctx.save();
        ctx.drawImage(img, 0, 0);
        ctx.restore();

        position.start.x = position.end.x;
        position.start.y = position.end.y;
        imagePos.x = position.end.x;
        imagePos.y = position.end.y;
    }
}
h1 img{
  vertical-align:middle;
}
canvas{
  width:inherit;
  background:white;
}
#info{
  position:absolute;
  top:0;
  right:0;
}
<h1>
Image I'm using:  <img id='img' src="https://scontent-sin6-2.xx.fbcdn.net/v/t39.2081-6/c0.0.51.51/p50x50/10935987_911967968835908_1597235465_n.png?oh=01328f28a865b7cbe62cf67036b3615d&oe=5A5F490A">
</h1>
<div>
<canvas id='canvas' width="500px" height="500px"></canvas>
</div>
<div id='info'>
<p id='mouse'>

</p>
<p id='image'>

</p>
</p>
</div>


javascript canvas transform translate-animation
person NWNishungry    schedule 25.08.2017    source источник
comment
Я уверен, что у вас есть вопрос, если вы опубликуете его :)   -  person Shadew    schedule 25.08.2017
comment
Я опубликовал один. Вопрос в том, как получить координату верхнего левого угла изображения после перевода изображения на холст. Я знаю, как работает перевод, но я не знаю формулы для получения координат верхнего левого угла изображения после перевода.   -  person NWNishungry    schedule 25.08.2017

Ответы (1)


arrow_upward
3
arrow_downward

Это не формула, это простое изменение в вашем коде:

Изменять

imagePos.x = position.end.x;
imagePos.y = position.end.y;

В

imagePos.x += x;
imagePos.y += y;

Поскольку вы переводите изображение по x и y, вы также должны переводить положение по x и y...

person Shadew    schedule 26.08.2017