Javascript 用户地图滚动

假设我有一个二维平面。10000*10000单位的二维平面

现在这个平面有很多物体散布在它周围。假设这些对象是矩形。我希望能够显示用户只有500*500面积的任何部分的地图与矩形包括在内

我的问题是：如何向用户显示地图的一部分区域

如果你不理解这个问题，我可以向你展示我在下图中的意思：

到目前为止，我已经尝试了以下代码：

var socket = io("localhost:8000");
var data = {};
var init = false;
var screenPos = {
    x:0,y:0
};
var setup = function(){
    createCanvas(500,500);
    background(255);
    socket.on("init",function(d){ // This just gets the position of the building relative to the 10000 * 10000 square
        data = d;
        screenPos = {
            x: data.building.x - width/2, // building.x - screenwidth/2 this line is supposed to theoretically center the drawing on the rectangle :|
            y: data.building.y - height/2 //building.y - screenheight/2
        };
        loop();
    })
    socket.on("update",function(d){
        data = d;
    });
noLoop();
};

var draw = function(){
    rect(data.building.x,data.building.y,50,50); // In this example, the rectangle is the building
};

矩形可以是0,0到1000010000之间的任意位置。 如果您需要我进一步详细说明，请不要害怕询问更多信息

---

假设来自服务器的数据有效。

您可以使用内置的

camera（）

功能：

函数设置（）{
createCanvas（100100）；
}
函数绘图（）{
背景（0）；
摄像机（鼠标、鼠标）；
填充（255,0,0）；
rect（50,50,50,50）；
}

将鼠标移到下面：

我将签出此函数。我会就此回复你的。非常感谢，它完全符合我的要求：Dif如果我想这样做，但画布大小不同，但用户只能查看500*500，我该怎么做？@ahitt6345如果你只想让用户看到

500x500

，那么你不就使用

500x500

的画布吗？然后您可以使用

camera（）

函数设置视图。如果你想做其他事情，请在新问题中发布一个，我们将从那里开始。