我正在使用摄像头软件,几乎所有功能都可以使用,但是当鼠标离开屏幕时,它还会在空白处捕获图片。我需要一种使捕获框停在画布边框上的方法。
我听说过使用math.min / max进行边界划分,但是我无法从其实际工作原理中得出正面或反面的结论。
obligatory code tag because no one-part of my code would make any sense to refrence here.
Math.max([value1[, value2[, ...]]])
Math.min([value1[, value2[, ...]]])
答案 0 :(得分:1)
您需要做的是简单检查当前位置(X / Y)在盒子上的位置以及画布的最小/最大尺寸是什么,然后只要将盒子的位置强制为最小值或最大值即可。即将超过两者之一。
https://jsfiddle.net/0dfs9ynk/
function update() {
context.clearRect(0, 0, canvas.width, canvas.height); //clear previously drawn rectangles
context.strokeStyle = '#f00'; //set stroke color
context.lineWidth = 2;
if(mouseX <= 0){
mouseX = 0;
}
if(mouseY <= 0){
mouseY = 0;
}
if(mouseX + selectionX >= canvas.width){
mouseX = canvas.width - selectionX;
}
if(mouseY + selectionY >= canvas.height){
mouseY = canvas.width - selectionY;
}
context.strokeRect(mouseX, mouseY, selectionX, selectionY); //set selection size
requestAnimationFrame(update);
}