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

Question

我正在开发一款相机软件，几乎所有软件都可以正常工作，但当鼠标离开屏幕时，它也会捕捉到虚空之外的照片。我需要一种方法让捕获框停在 canvas 的边界。

我听说过使用数学。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) 在盒子上的位置以及 canvas 的 min/max 尺寸是多少，然后只需强制如果框的位置即将超过最小值或最大值。
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);
}

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

Setup drawn rectangle collsion in canvas element that follows mouse

javascript

mouse

canvas