Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Не успевает обновиться отображение svg элемента (https://javascript.ru/forum/events/77743-ne-uspevaet-obnovitsya-otobrazhenie-svg-ehlementa.html)

Maklay 14.06.2019 07:51

Не успевает обновиться отображение svg элемента
 
function addPoly() {

    if (document.getElementById('editMode').checked != true) return;

    let line = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');

    let svg = document.getElementsByTagName('svg')[0];

    line.classList.add('newLine');

    svg.classList.add('drawLine');

    svg.insertBefore(line, svg.firstChild);

    let realPoints = line.getAttribute('points') ? line.getAttribute('points') + ' ' : '';

    svg.onclick = drawLine;

    svg.onmousemove = targetingLine;

    svg.oncontextmenu = stopDraw;



    //прицеливаемся для рисования

    function targetingLine(e) {

        let newX = e.pageX - parseInt(getComputedStyle(svg).left);

        let newY = e.pageY - parseInt(getComputedStyle(svg).top);

        line.setAttribute('points', realPoints + Math.floor(newX) + ',' + Math.floor(newY));

    }

    //отрисовываем плечо линии

    function drawLine(e) {

        targetingLine(e);

        line.setAttribute('ps', 0);

        realPoints = line.getAttribute('points') + ' ';

    }

    /* завершаем рисование и снимаем обработчики */

    function stopDraw(e) {

        line.setAttribute('points', realPoints)

        realPoints = '';

        svg.onclick = null;

        svg.oncontextmenu = null;

        svg.onmousemove = null;

        svg.classList.remove('drawLine');

        addAtr(line);

        //если характеристики не заполнены удаляем

        if (!line.classList.contains('settedLine')) {

            line.remove();

        }

        return false;

    }



}

Как видится работа данной функции:
1)при левом клике добавляем точку
2) при движении растягивается линию от последней существующей точки до момента получения клика
3)по правому клику оставляем в линии только уже добавленные точки(удаляем последний растянутый хвост), снимаем обработчики и вызываем функцию привязки характеристик.

И в принципе все работает так же как видится, за исключением того, что результат отображения строки line.setAttribute('points', realPoints) отображается только после завершения addAtr(line), причем если поставить точку остановки, после данной строки, то все отображается корректно. Сама функция addAtr представляет из себя набор prompt, как временное решение.

Прошу подсказать куда смотреть, и как это можно исправить.

Alexandroppolus 14.06.2019 08:52

Цитата:

Сообщение от Maklay
Сама функция addAtr представляет из себя набор prompt, как временное решение.

Подозреваю, что эти промпты и задерживают отрисовку. Что там должно быть, в этой функции? Юзер должен указать какие-то данные?
Попробуй для начала, чтобы поверить мою гипотезу, запустить эту функцию асинхронно - строки 65...73 поместить в setTimeout(..., 100);


Часовой пояс GMT +3, время: 20:06.