Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.06.2019, 07:51
Интересующийся
Отправить личное сообщение для Maklay Посмотреть профиль Найти все сообщения от Maklay
 
Регистрация: 01.10.2017
Сообщений: 19

Не успевает обновиться отображение 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, как временное решение.

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

Последний раз редактировалось Maklay, 14.06.2019 в 08:19.
Ответить с цитированием
  #2 (permalink)  
Старый 14.06.2019, 08:52
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 901

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавный скролл к элементу в таблице. И отображение элемента посередине окна mrprim Элементы интерфейса 7 29.03.2017 14:14
Отображение нового элемента в массиве Sashkouuu Элементы интерфейса 6 01.02.2016 09:33
JS как изменить позицию SVG элемента? mkrichet Общие вопросы Javascript 2 09.12.2015 07:59
Создание SVG элемента и вставка на страницу FINoM Events/DOM/Window 3 13.09.2015 16:47
Браузер не успевает определить высоту вновь созданного через XMLHttpRequest элемента Lockpickup AJAX и COMET 17 25.04.2011 16:58