Блог

Главная - Вопросы по программированию - Как сгенерировать строки предложений для выравнивания прямоугольников вместе с группой других прямоугольников?

Как сгенерировать строки предложений для выравнивания прямоугольников вместе с группой других прямоугольников?

#algorithm #graphics

#алгоритм #графика

Вопрос:

У меня есть система на основе сетки, представьте ее как photoshop, в системе есть перетаскиваемые блоки, которые можно перемещать. Я хочу предоставить строки предложений, в которых пользователь может отбросить блок, чтобы он был выровнен с соответствующим блоком.

Здесь, в видео, синие линии генерируются таким алгоритмом. Как называется этот алгоритм?

Пример PandaDoc

Пример: из PandaDoc.

Ответ №1:

Я не знаю, какой алгоритм здесь используется. Но я создал простую демонстрацию того же самого, используя P5.js библиотека.

Основная логика заключается в том, чтобы считать каждый элемент прямоугольником и сопоставлять его углы с координатами мыши.

 const wOffset = draggableBox.w /2 ;
    const hOffset = draggableBox.h / 2;
    const currentPosX = mouseX - wOffset;
    const currentPosY = mouseY - hOffset;

    for(let i = 0; i<boxes.length ; i  ){
        stroke(boxes[i].color_);
        noFill();
        rect(boxes[i].x, boxes[i].y, boxes[i].w, boxes[i].h);
        
        let diff = abs(currentPosX - boxes[i].x);
        if(diff < 7){
            stroke(255);
            strokeWeight(2);
            line(boxes[i].x, boxes[i].y, boxes[i].x, currentPosY);
        }

        diff = abs(currentPosY - boxes[i].y);
        if(diff < 7){
            stroke(255);
            strokeWeight(2);
            line(boxes[i].x, boxes[i].y, currentPosX, boxes[i].y);
        }

        diff = abs(currentPosX - (boxes[i].x   boxes[i].w));
        if(diff < 7){
            stroke(255);
            strokeWeight(2);
            line((boxes[i].x   boxes[i].w), boxes[i].y, (boxes[i].x   boxes[i].w), currentPosY);
        }

        diff = abs(currentPosX - (boxes[i].x   boxes[i].w/2));
        if(diff < 7){
            stroke(255);
            strokeWeight(2);
            line((boxes[i].x   boxes[i].w /2), boxes[i].y, (boxes[i].x   boxes[i].w /2), currentPosY);
        }

        diff = abs(currentPosY - (boxes[i].y   boxes[i].h));
        if(diff < 7){
            stroke(255);
            strokeWeight(2);
            line(boxes[i].x, (boxes[i].y   boxes[i].h), currentPosX, (boxes[i].y   boxes[i].h));
        }

        diff = abs(currentPosY - (boxes[i].y   boxes[i].h / 2));
        if(diff < 7){
            stroke(255);
            strokeWeight(2);
            line(boxes[i].x, (boxes[i].y   boxes[i].h / 2), currentPosX, (boxes[i].y   boxes[i].h / 2));
        }
    }

    let diff = abs(currentPosX - width / 2);
    if(diff < 1.5){
        stroke(MOUSE_LINE_COLOR);
        line(currentPosX, 0, currentPosX, currentPosY);
    }
    diff = abs(currentPosY - height / 2);
    if(diff < 1.5) {
        stroke(MOUSE_LINE_COLOR);
        line(0, currentPosY, currentPosX, currentPosY);
    }

    stroke(color(255, 0, 0));
    rect(mouseX - wOffset, mouseY - hOffset, draggableBox.w, draggableBox.h);
    // line(0, mouseY, 600, mouseY);

Вы можете найти мою суть github здесь.

Комментарии:

1. Спасибо @AMI, это было действительно полезно, но суть не охватывает все варианты использования, в настоящее время я не принимаю это как решение, поскольку должно быть имя алгоритма, который я ищу.

2. Ах да, при проверке я понял, что регистры с правого и нижнего края отсутствуют.