时间戳

首页 > 解决方案 > 继续在鼠标上拖动背景

javascript - 继续在鼠标上拖动背景

问题描述

我试图让无限的背景拖下去，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>

标签： javascriptprocessingp5.js

解决方案

首先，有一种更简单的方法来获得阻力距离。用于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>

推荐阅读