4

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

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

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

  • 我想防止将画布平移到比第一列更远的地方，即第一列最多可以在左边框。（同样适用于上边框和向下平移）
  • 缩放时，缩放第一列时出现问题，我无法修复

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

4

1 回答 1

4

检查这个小提琴：

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;

看看我在小提琴中的一般方法，看看你是否想稍微改变一下你的策略。

老实说，我无法遵循您的某些代码。

于 2013-02-03T00:23:13.543 回答