Javascript Pan&x2B;使用固定的第一列缩放HTML5画布网格

Javascript Pan&x2B;使用固定的第一列缩放HTML5画布网格,javascript,html,canvas,zooming,panning,Javascript,Html,Canvas,Zooming,Panning,我想创建一个带有固定第一列的HTML5画布网格(MS Excel也有类似的选项)。 到目前为止,我已经能够创建以下内容: 我根据Phrogz在这里的帖子添加了平移+缩放功能: 但是,我在平移+缩放和固定列时遇到以下困难: 我想防止画布向右平移超过第一列,即第一列最多只能位于左边框。(同样适用于上边框和向下平移) 缩放时,缩放第一列时出现问题,我无法修复 有人能帮我一下吗?看看这把小提琴: 它应该给你一些关于如何处理边界条件的想法(也包括缩放) 我不知道为什么选择使用两个画布而不使用jQue

我想创建一个带有固定第一列的HTML5画布网格(MS Excel也有类似的选项)。 到目前为止,我已经能够创建以下内容:

我根据Phrogz在这里的帖子添加了平移+缩放功能:

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

  • 我想防止画布向右平移超过第一列,即第一列最多只能位于左边框。(同样适用于上边框和向下平移)
  • 缩放时,缩放第一列时出现问题,我无法修复
有人能帮我一下吗?

看看这把小提琴:

它应该给你一些关于如何处理边界条件的想法(也包括缩放)

我不知道为什么选择使用两个画布而不使用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;
如果(gX>0)gX=0;
如果(gX0)gY=0;
如果(gY
看看我的一般方法,看看你是否想改变一下你的策略

老实说,我不能理解你的一些代码