继续用鼠标拖动背景

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>

继续用鼠标拖动背景

continues dragging background on mouse

javascript

processing

p5.js