javascript - 创建 HTML5 无限 Canvas

Question

我正在尝试学习如何从头开始构建交互式 Canvas ，但我在尝试绘制 Canvas 视口(viewport)之外的东西时遇到了麻烦(超出 canvas.width 和 canvas.height).目标是拥有类似无限 Canvas 的东西，您可以在其中滚动和缩放并将东西放在我想要的任何地方。

我想出了如何在缩小out时正确计算正确的插入点，该算法的工作原理如下:

see if the component should be added off the limits of the canvas;
if so, transform the offset (x, y) adding the distance between the point and the edge of the canvas.

我注意到 event.pageX 和 event.pageY 值总是根据 Canvas 的宽度和高度提供给我的，所以如果我缩放然后，这些值小于应有的值(因为我正在查看更多 像素)。转换算法在 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 是适合这项工作的工具还是我应该使用其他工具？

我用来学习的完整示例可以在这个 fiddle 上找到.

更新

我有另一个解决问题的想法:不是在 Canvas 之外绘制东西，而是简单地平移我的点以按比例适应 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}
];

在那之后我想我只需要缩放/变换 Canvas 来进行缩放。这个逻辑可以吗？

Answer 1

您可以使用名为 TiledCanvas 的库
它提供了缩放和移动的接口(interface)。并使用所有 Canvas api 在无限空间中绘制。

它确实需要您告诉您正在绘制的位置。

https://github.com/Squarific/TiledCanvas