用戶地圖滾動

Question

假設我有一個2D飛機。 2萬平面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到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找到。