用户地图滚动

Question

我们说我有一架二维飞机。 2d飞机，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到10000,10000之间的任何值。 如果您需要我进一步详细说明，请不要害怕询问更多信息。

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

Answer 1

您可以使用内置的camera()功能：

function setup(){
  createCanvas(100, 100);
}
function draw(){
  background(0);
 camera(mouseX, mouseY);
fill(255, 0, 0);
 rect(50, 50, 50, 50);
}

<script src="https://github.com/processing/p5.js/releases/download/0.5.4/p5.js"></script>
<p>Mouse over this:</p>

可以在the reference找到更多信息。