Question

我正在使用摄像头软件，几乎所有功能都可以使用，但是当鼠标离开屏幕时，它还会在空白处捕获图片。我需要一种使捕获框停在画布边框上的方法。

我听说过使用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[, ...]]])

https://jsfiddle.net/fzv80a5e/

Answer 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);
}

在跟随鼠标的画布元素中设置绘制的矩形碰撞

1 个答案: