创建一个HTML5无限画布

Question

我正在尝试学习如何从头开始构建交互式画布，但我在尝试绘制超出画布视口范围的东西（超过canvas.width和canvas.height）时遇到了麻烦。目标是拥有类似于无限画布的东西，您可以滚动、缩放并将物品放在任何想要的地方。

我已经弄清楚了当我们缩小视图时正确计算正确插入点的方法，算法如下：

查看是否应该将组件添加到画布的极限范围以外；
如果是，则转换偏移量（x，y），并添加到点和画布边缘之间的距离。

我注意到event.pageX和event.pageY的值总是基于画布的宽度和高度给我的，因此，如果我缩小视图，这些值就会比应有的值更小（因为我正在查看更多像素）。以下是JS中的变换算法：

// pageX is 430, pageY is 480
// canvas has width=600 height=600
// scale is 0.6, meaning the canvas actually has size 360x360

var currentSize = canvas.width * scale;  // 360
pageX = canvas.width + (pageX - currentSize);
pageY = canvas.width + (pageY - currentSize);

在纸上画这个逻辑似乎是有效的，但问题在于我（显然）无法越过画布限制，因此无法看到结果。问题如下：

• 这个逻辑正确吗？
• 有没有办法实现我的目标？（指导文献将非常感激）
• Canvas是完成任务的正确工具还是应该使用其他工具？

我正在使用的完整示例可以在此链接中找到。

更新

我有另一个解决问题的想法：不是在画布之外绘制东西，而是将我的点按比例缩放以适应画布的限制，然后应用缩放来缩放。类似这样：

// canvas is 500x500
var points = [
    {text: 'Foo', x: 10, y: 10},
    {text: 'Bar', x: 854, y: 552},  // does not fit inside
    {text: 'Baz', x: 352, y: 440}
];

// The canvas can't show all these points, the ideal
// would be having a canvas of at least size 900x600,
// so I can use a rule of three to convert all points
// from this imaginary canvas to fit inside my 500x500

// in 900px, x=10
// in 500px, x=?

// hence, the formulas are `newX=x * 500 / 900` and `newY = y * 500 / 600`

var converted_points = [
  {text: 'Foo', x: 5.55, y: 8.33},
  {text: 'Bar', x: 474.44, y: 460},
  {text: 'Baz', x: 195.55, y: 366.66}
];

之后，我认为我只需要对画布进行缩放/变换即可实现缩放。这个逻辑可以吗？

- Lucas Sampaio

---

画布已经绘制了很多看不见的东西，主要是蘑菇。 - GameAlchemist

@atmd，这个想法是绘制部分在画布外面，部分在画布上的图像。其想法是呈现一幅视觉效果类似于从汽车侧窗望出去看到风景滚动的场景;-) - markE

实际上，与此同时我又有了另一个想法，所以我会在一分钟内更新问题。 - Lucas Sampaio

因为画布具有裁剪功能，所以它已经是“无限”的了。只需绘制，画布就会裁剪超出其范围的任何内容。通过在对象不包含、重叠或与画布区域相交时不调用任何绘制操作来进行优化。 - user1693593

@KenFyrstenberg，你说得完全正确。我会完善我的原型，稍后编辑这个问题。 - Lucas Sampaio

Answer 1

您可以使用名为TiledCanvas的库。

它提供了缩放和移动的接口，使用所有画布API在无限空间中绘制。

但需要告诉它你要在哪里绘制。

https://github.com/Squarific/TiledCanvas

- urban