将第一列固定的HTML5画布网格进行平移和缩放

Question

我想创建一个带有固定第一列的HTML5画布（MS Excel有类似的选项）。 到目前为止，我已经能够创建以下内容：http://jsfiddle.net/dobbylan/AbnpE/ 我基于Phrogz的发帖在此处添加了Pan + Zoom功能：Zoom Canvas to Mouse Cursor 但是我在平移+缩放和固定列上遇到了以下问题：

• 我希望防止将画布向右滚动超过第一列，即第一列最多可以在左边框处。（向上滚动有同样的应用）
• 缩放时，出现了一个无法修复的第一列缩放问题。

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

- Dobbylan

Answer 1

请查看这个示例：

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;

请查看我的代码示例以了解是否需要调整您的策略。

老实说，我无法理解您的一些代码。

- mattdlockyer