logo标签列表

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

javascripthtmlcanvaszoomingpanning
4
我想创建一个带有固定第一列的HTML5画布（MS Excel有类似的选项）。 到目前为止，我已经能够创建以下内容：http://jsfiddle.net/dobbylan/AbnpE/ 我基于Phrogz的发帖在此处添加了Pan + Zoom功能：Zoom Canvas to Mouse Cursor 但是我在平移+缩放和固定列上遇到了以下问题：
  • 我希望防止将画布向右滚动超过第一列，即第一列最多可以在左边框处。（向上滚动有同样的应用）
  • 缩放时，出现了一个无法修复的第一列缩放问题。
请有人可以帮我解决这个问题吗？
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;

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

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，