Javascript 在缩放和移动图像时，当图像的任何一侧接触画布一侧时，停止移动图像

我在html5画布上开发了放大和缩小功能。当我的图像侧面接触画布的侧面时，它不应该再被重新绘制。我想要这样的功能

缩放图像后，参考第二个画布框并尝试移动图像。当图像侧与画布侧重叠时，图像的移动停止

html

---

我认为处理这些情况最简单的方法是总是根据用户输入计算下一个值，然后钳制该值，然后将其指定为新值

nextX += x - startX ;
nextY += y - startY ;

这将涉及使用夹紧功能：

function clamp(x, minx, maxx) {
     if (x<minx) return minx;
     if (x>maxx) return maxx;
     return x;
}

---

不幸的是，它不工作。下面是我更新的函数。nextX+=x-startX；nextY+=y-星型；x=ClampNext，0，canvas.width-currentScale*image.width；y=ClampNext，0，canvas.height-currentScale*image.height；startX=x；startY=y；好的，但你们知道S.O.不是提供最终的工作答案，而是提供指导。看来你成功了，太棒了！

nextX += x - startX ;
nextY += y - startY ;

function clamp(x, minx, maxx) {
     if (x<minx) return minx;
     if (x>maxx) return maxx;
     return x;
}

 x = clamp(nextX, 0 , canvas.width - scale * image width );
 y = clamp(nextY, 0 , canvas.height - scale * image height );