Проблема с jquery + холст и рисование линий

Question

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

Вот что у меня есть: http://jsfiddle.net/LCfqj/

Любая помощь будет принята с благодарностью!

Answer 1

Поскольку вы ищете и заменяете каждый термин, используя один и тот же класс («слово»), он имеет аддитивный эффект. Вместо того, чтобы использовать один и тот же класс для каждого термина, каждый раз используйте что-то уникальное. "слово1", "слово2" или слово плюс поисковый термин.

Я добавил предупреждение, которое показывает это на практике:

http://jsfiddle.net/A4rPQ/

Вы увидите, что каждый раз, когда вы будете искать термин, вы получите 2 дополнительных результата из $ (". Word"). Length.

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

Answer 2

Возможно, вам следует сохранить и восстановить состояние контекста, прежде чем рисовать линию.
Из того, что я увидел, вы просто восстанавливаете контекст в функции рисования линии, но не сохраняете его при вызове функции.