我正试图从头开始学习如何构建交互式画布，但在画布视口之外绘制东西（超过canvas.width和canvas.height的东西）时遇到了困难。我们的目标是拥有一个像无限画布一样的东西，在那里你可以滚动、缩放并把东西放在我想要的任何地方。

当我们缩小时，我发现了如何正确计算正确的插入点，算法是这样工作的：

查看组件是否应添加off画布的限制
如果是，请变换偏移量（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 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}
];

在那之后，我想我只需要缩放/变换画布来进行缩放。这样的逻辑可以吗？