继续在鼠标上拖动背景

Question

我试图在mouseDragg上进行无限背景拖动，但我卡住了。我要背景消失时左边出现右边和对面的方式。我尝试了各种解决方案，但似乎都不起作用。

var StageStart = 0;
var StageEnd = 200;
var x1 = 0;
var x2 = 0;
var x=0;
var y=0;
function setup() { 
createCanvas(200, 200);
} 
function draw() { 
background(0);
stroke(255, 204, 0);
strokeWeight(4);
fill(0, 255, 0);
translate(x1,x2);
rect(x, y, width, height);
}

function mouseDragged(){
x1=mouseX;
if(x1 <= -width){
for(var i=0;i<width;i++)
x1=StageEnd -width+ i++ ;
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>

Answer 1

首先，有一种更容易获得拖动距离的方法。使用pmouseX获取上一个鼠标位置：

dx = mouseX - pmouseX;

当背景偏移时，必须在原始背景的左侧或右侧第二次绘制背景：
(注意，如果背景在两个轴上都偏移，则必须绘制4次(

rect(x, y, width, height);
if (x1m > 0)
rect(x-width, y, width, height);
else if (x1m < 0)
rect(x+width, y, width, height);

参见示例：

var StageStart = 0;
var StageEnd = 200;
var x1 = 0;
var x2 = 0;
var x=0;
var y=0;
function setup() { 
createCanvas(200, 200);
} 
function draw() { 
background(0);
stroke(255, 204, 0);
strokeWeight(4);
fill(0, 255, 0);
var x1m = x1 % width;
translate(x1m, x2);

rect(x, y, width, height);
if (x1m > 0)
rect(x-width, y, width, height);
else if (x1m < 0)
rect(x+width, y, width, height);
}

function mouseDragged(){
dx = mouseX - pmouseX;
x1 += dx;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>