javascript - 如何使用 P5js 将 DOM 元素拖入 Canvas 而不离开 Canvas ？

Question

我想要什么:

我有一个 div，我想在 Canvas 上移动它，但将它限制在 Canvas 宽度和高度范围内

我有什么:

我正在使用 p5.dom.js 库

P5js代码:

let dragging = false;
let offsetX, offsetY, onsetX, onsetY;
let canvasWidth, canvasHeight;
let currentDragDiv;

function setup() {
    canvasWidth = windowWidth < 400 ? 400 : windowWidth;
    canvasHeight = windowHeight < 400 ? 400 : windowHeight;
    canvas = createCanvas(canvasWidth, canvasHeight)
            .mousePressed(createDiv);
}

function draw() {

    background(200);

    if(dragging){
        if(mouseX + onsetX < canvasWidth && mouseX + offsetX > 0){
            currentDragDiv.position(mouseX + offsetX, currentDragDiv.y);
        }
        if(mouseY + onsetY < canvasHeight && mouseY + offsetY > 0 ){
            currentDragDiv.position(currentDragDiv.x, mouseY + offsetY);
        } 
    }
}

function createDiv(){
    let div = createDiv("")
        .mousePressed(function(){ dragDiv(div); })
        .mouseReleased(function(){ dropDiv(div); })
        .position(mouseX, mouseY);
}

function dropDiv(){
    dragging = false;
    currentDragDiv = null;
}

function dragDiv(d){
    currentDragDiv = d;
    dragging = true;        
    offsetX = currentDragDiv.x - mouseX;
    offsetY = currentDragDiv.y - mouseY;
    onsetX = currentDragDiv.width + offsetX;
    onsetY = currentDragDiv.height + offsetY;
}

问题:

此代码运行良好，但如果用户移动鼠标太快，div 不会移动到 Canvas 的边界，如 this发生了(我将 div 非常快速地拖动并向右移动，它停在了屏幕中间)。这个问题使变量 onsetX 和 onsetY 出错，并根据 div 离 Canvas 边框的距离而变得有点困惑。

是否可以消除这个“错误”并使 div 一直延伸到 Canvas 的边界？

观察:

1. 我删除了一些我认为这道题不需要的代码。
2. onsetX 和onsetY 变量是offsetX 和offsetY 的反义词，它是从鼠标位置到边框的位置，但是因为英语不是我的母语，所以我不知道如何命名变量。建议会很好。

Answer 1

在您当前的代码中，如果超出 Canvas 的边界，则完全省略拖动:

if(mouseX + onsetX < canvasWidth && mouseX + offsetX > 0){
    currentDragDiv.position(mouseX + offsetX, currentDragDiv.y);
}
if (mouseY + onsetY < canvasHeight && mouseY + offsetY > 0 ){
    currentDragDiv.position(currentDragDiv.x, mouseY + offsetY);
}

相反，您必须将拖动限制在从 0 到 canvasWidth 的范围内，分别从 0 到 canvasHeight。这意味着您必须将拖动“钳制”到这个范围内:

function draw() {
    let newX, newY;

    background(200);

    if(dragging){

        newX = mouseX + offsetX;

        if ( newX > canvasWidth ) {
            newX = canvasWidth - currentPostIt.width;
        } 
        if ( newX < 0 ) {
            newX = 0;
        }

        newY = mouseY + offsetY;

        if ( newY > canvasHeight ) {
          newY = canvasHeight - currentPostIt.height;
        } 
        if ( newY < 0 ) {
          newY = 0;
        }

        currentDragDiv.position(newX, newY);
    }
}