如何在翻譯後獲得畫布中圖像的左上角座標？

我有一個問題，如何在畫布中翻譯圖像後獲得圖像左上角的座標？我想讓圖像區域可選，同時讓空白區域不能選擇，但如果沒有它，就不可能滿足鼠標是否在圖像範圍內的條件。如何在翻譯後獲得畫布中圖像的左上角座標？

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>

來源

2017-08-25 NWNishungry

我敢肯定你有一個問題，如果你發佈一個:) – E730

我沒有發佈一個。問題是如何在畫布中翻譯圖像後獲得圖像左上角的座標。我知道翻譯是如何工作的，但我不知道翻譯後得到圖像左上角座標的公式。 – NWNishungry

它不是一個公式，它是在你的代碼的簡單變化：

變化

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

進入

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

因爲你正在翻譯圖像的X和Y，你也必須翻譯的位置由X和Y ...

來源

2017-08-26 17:42:14 E730

謝謝你。我向你致敬致敬！ – NWNishungry

如何在翻譯後獲得畫布中圖像的左上角座標？

回答

相關問題