我希望实现类似Konva js中无限拖动的效果,有人能帮忙吗?我尝试了很多方法,但都不行。我是p5js和JavaScript新手,请给我一些提示。只有这个元素阻止了我完成整个项目。
var grid;
var current_img;
var BgCat1 = [];
var layerOne;
let show_grid = false;
我希望实现类似Konva js中无限拖动的效果,有人能帮忙吗?我尝试了很多方法,但都不行。我是p5js和JavaScript新手,请给我一些提示。只有这个元素阻止了我完成整个项目。
var grid;
var current_img;
var BgCat1 = [];
var layerOne;
let show_grid = false;
可能有更优雅的解决方案,但在这里我在网格的每一侧绘制了一个额外的单元来处理环绕,因此一个12x12的网格显示为10x10。 在此处查看其运行结果:https://editor.p5js.org/rednoyz/full/uJCADfZXv
let dim = 10, sz;
let xoff = 0, yoff = 0;
function setup() {
createCanvas(400, 400);
sz = width/ dim;
}
function mouseDragged() {
xoff += mouseX - pmouseX;
yoff += mouseY - pmouseY;
}
function draw() {
background(255);
for (let i = 0; i < dim+2; i++) {
for (let j = 0; j < dim+2; j++) {
let x = ((xoff + j * sz) % (width+sz)) - sz;
if (x < -sz) x += width+sz;
let y = ((yoff + i * sz) % (height+sz)) - sz;
if (y < -sz) y += height+sz;
rect(x, y, sz, sz);
text(i * 10 + j, x + sz/2, y + sz/2);
}
}
}
mouseDragged()
函数中加入 if((mouseX < width && mouseX > 0)&&(mouseY < height && mouseY > 0))
来仅在拖动画布时生效。 - darcane