Как перетащить элемент DOM внутрь холста, не выходя из холста с помощью P5js? - PullRequest
Новая
       46

Как перетащить элемент DOM внутрь холста, не выходя из холста с помощью P5js?

0 голосов
/ 14 октября 2018

Что я хочу:

У меня есть div, и я хочу переместить его по холсту, но ограничить его шириной и высотой холста

Что у меня есть:

Я использую p5.dom.js library

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 не продолжается до тех пор, пока не произойдет граница холста, например , это (я перетащил div и очень быстро переместил его вправо, и он остановился в середине экрана).Эта проблема приводит к тому, что переменные onsetX и onsetY идут не так, как надо, и портят подсвеченный бит, зависящий от того, насколько div удален от границы холста.

Возможно ли устранить эту "ошибку" и сделатьdiv идти до границы холста?

Замечания:

  1. Я удалил часть кода, который, как мне кажется, не нужен для этого вопроса.
  2. Переменные onsetX и onsetY - это противоположность offsetX и offsetY, это положение границы от позиции мыши, но поскольку английский не является моим родным языком, я не знал, как назвать переменную.Рекомендации были бы хорошими.

1 Ответ

0 голосов
/ 14 октября 2018

В вашем текущем коде перетаскивание полностью исключено, если граница холста превышена: 

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);
    }
}
...