javascript – Pan Zoom HTML5画布网格,带有固定的第一列

我想用固定的第一列创建一个HTML5画布网格(MS Excel有类似的选项).
到目前为止,我已经能够创建以下内容：http://jsfiddle.net/dobbylan/AbnpE/

我已根据Phrogz的帖子添加了Pan Zoom功能：Zoom Canvas to Mouse Cursor

但是我在平移缩放和固定列时遇到以下困难：

>我想防止将画布向右平移到第一列,即第一列最多可以位于左边界. (同样适用于上边框并向下平移)
>缩放时,缩放第一列时出现问题,我无法修复

有人可以帮我解决这个问题吗？

解决方法:

检查这个小提琴：

http://jsfiddle.net/U8BE5/1/

它应该为您提供有关如何处理边界条件(也包括缩放)的一些想法.

我不确定你为什么选择使用两个画布而不使用jQuery,这可能造成的伤害大于好处.

边界的相关代码：

if (gX > 0) gX = 0;
if (gX < canvas.width - gW * gScale) gX = canvas.width - gW * gScale;
if (gY > 0) gY = 0;
if (gY < canvas.height - gH * gScale) gY = canvas.height - gH * gScale;

查看我在小提琴中的一般方法,看看你是否想要稍微改变你的策略.

说实话,我无法遵循你的一些代码.

标签：javascript,html5,canvas,zoom,panning
来源： https://codeday.me/bug/20190626/1291734.html