画布：停止在图像末尾平移

Question

我正在实现放大和平移画布的能力。我这样做有两个画布，一个用于绘图，一个用于显示视口。我无法找到裁剪区域的限制。

无论如何这一切都有效，我只是在调用放大时将比例设置为高于1的某个值，这具有所需的效果。

我正在以与为精灵工作表设置动画相同的方式平移画布，视口画布仅作为绘图画布顶部的剪裁区域。

我坚持使用为边界设置的数字来阻止画布向右和向下移动太远。

这里我是如何实现平移的，只是为了清晰起见：

//This only gets called when the canvas is zoomed in.    
viewPort.drawImage(canvas,translationX,translationY,viewPort.width,viewPort.height
                   ,0,0,viewPort.width,viewPort.height);

TranslationX从0开始，每次按下右箭头后我按一些值递增，我知道这不应该是一些任意数字，但是现在我只是把它设置为4。

无论如何这一切都有效，但它离开了画布的边缘，我无法弄清楚应该停止平移的条件，这是我到目前为止所拥有的：

 if(canvas.width + translationX <= bCanvas.width)

      translationX += 4; //Pan right...

显然这不起作用，它将大约1/5的视口从画布边缘移开。我现在正在讨厌它，只是把任意数字投入到条件中，所以认为这是一个寻求指导的好时机。

提前致谢

修改

好的，所以我已经制作了一张图片来说明这个问题，但我的解释还不清楚。

绿色框表示我正在平移的图像，上面代码段中命名的“画布”。

黄色框表示剪辑区域，上面代码段中的“viewPort”。

灰色区域仅代表网页的其余部分。

所以要澄清一点，我很困惑在条件中加入什么值来阻止裁剪区域离开画布。

再次感谢