我正在尝试学习如何从头开始构建交互式画布，但是我在绘制画布'视口之外的东西（超出canvas.width和canvas.height的事物）时遇到了麻烦。目标是拥有像无限画布一样的东西，你可以滚动和缩放，把东西放在我想要的任何地方。
我想出了当我们放大 out 时如何正确计算正确的插入点，算法的工作原理如下：
查看该组件是否应添加 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);
在纸上绘图这个逻辑似乎有用，但问题是我（显然）不能画出画布外限，所以我无法看到结果。问题是：
我可以在fiddle上找到我正在学习的完整示例。
我还有另一个想法来解决这个问题：我只是将我的点转换为适合画布'限制内部的内容，而不是在画布外部画出，然后应用缩放来放大/缩小。像这样：
// 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}
];
之后我想我只需要缩放/转换画布来进行缩放。这个逻辑好吗？
答案 0 :(得分：1)
您可以使用名为TiledCanvas的库 它提供缩放和移动的界面。 并使用所有画布apis在无限空间绘制。
确实需要告诉你在哪里画画。