1

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

无论如何，这一切都有效，我只是在调用放大时将比例设置为高于 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”。

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

所以为了澄清，我很困惑在条件中设置什么值来阻止剪辑区域离开画布。

再次感谢

4

0 回答 0