平移+缩放HTML5画布网格，固定第一列

Pan + Zoom HTML5 canvas grid with pinned first column

本文关键字：一列 网格 缩放 HTML5 布网格 平移      更新时间：2023-09-26

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

我在Phrogz的帖子基础上添加了平移+缩放功能：缩放画布到鼠标光标

然而，我在平移+缩放和固定列方面有以下困难：

  • 我希望防止将画布向右平移到比第一列更远的位置，即第一列最多可以在左边框处。（上边框和向下平移也是如此）
  • 缩放时，缩放第一列时出现问题，我无法解决

有人能帮我一下吗？

看看这个小提琴：

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;

看看我的大致方法，看看你是否想稍微改变一下你的策略。

老实说，我不能遵循你的一些代码。

相关文章：