用户地图滚动

Question

假设我有一个二维平面。一个 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 中找到更多信息。

用户地图滚动

User map scrolling

javascript

p5.js