我想创建一个带有固定第一列的 HTML5 Canvas 网格(MS Excel 有类似的选项)。 到目前为止,我已经能够创建以下内容:http://jsfiddle.net/dobbylan/AbnpE/
我已根据 Phrogz 在此处发布的内容添加了平移 + 缩放功能:Zoom Canvas to Mouse Cursor
但是我在平移+缩放和固定列方面遇到以下困难:
- 我想防止将 Canvas 向右平移到比第一列更远的位置,即第一列最多可以位于左边框。 (同样适用于上边框和向下平移)
- 缩放时,缩放第一列时出现问题,我无法修复
有人可以帮我解决这个问题吗?
最佳答案
检查这个 fiddle :
它应该让您了解如何处理边界条件(以及缩放)。
我不确定您为什么选择使用两个 Canvas 而不使用 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;
查看我在 fiddle 中的一般方法,看看您是否想稍微改变一下您的策略。
老实说,我无法理解您的某些代码。
关于javascript - 平移 + 缩放带有固定第一列的 HTML5 Canvas 网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9491111/