Я человек, который сделал уроки в 2. Здесь много чего происходит, поэтому я попытаюсь объяснить немного.
Я использую скрытый холст для выделения просто потому, что его легко изучить и он будет работать для ЛЮБОГО вида объектов (текст, сложные контуры, прямоугольники, полупрозрачные изображения). В реальной библиотеке диаграмм, которую я пишу, я не делаю ничего подобного, вместо этого я использую много математики для определения выбора. Метод hidden-canvas подходит для менее чем 1000 объектов, но со временем производительность начинает снижаться.
Lucidchart на самом деле использует более одного холста на объект. И это не просто их в памяти, они все там DOM. Это организационный выбор с их стороны, довольно странный, на мой взгляд. SVG, возможно, сделал бы их работу намного легче, если бы это было то, что они собираются делать, как будто они, кажется, делают большую работу, просто чтобы иметь возможность подражать, как SVG работает немного. Существует не так много веских причин иметь так много холстов в DOM, если вы можете избежать этого.
Мне кажется, что их преимущество заключается в том, что если у них есть 10 000 объектов, при нажатии вы должны смотреть только на один (маленький) холст, который щелкают для тестирования выбора, а не весь холст. Поэтому они сделали это, чтобы сделать код выбора немного короче. Я бы предпочел иметь только один холст в DOM; их путь кажется излишне грязным. Смысл canvas - иметь быструю поверхность рендеринга вместо из тысячи элементов, представляющих объекты. Но они только что сделали тысячу полотен.
В любом случае, чтобы ответить на ваш вопрос, самый простой способ создания интерактивных сетевых диаграмм, таких как lucidchart, - это либо использовать библиотеку, либо использовать SVG (или библиотеку SVG). К сожалению, их пока не так много. Получить всю функциональность самостоятельно в Canvas сложно, но, безусловно, выполнимо, и это даст вам лучшую производительность, чем SVG, особенно если вы планируете иметь более 5000 объектов на диаграммах. Начать с EaselJS сейчас не так уж плохо, хотя вы, вероятно, обнаружите, что изменяете его все больше и больше, когда углубляетесь в свой проект.
Я создаю одну такую интерактивную библиотеку диаграмм для холста для Northwoods Software , но это не будет сделано еще несколько месяцев.
Чтобы ответить на вопрос, который вроде как в вашем названии: Самый быстрый метод интерактивности, такой как тестирование попаданий, - это использование математики. Любая высокопроизводительная библиотека холста с функциями, поддерживающими множество различных типов объектов, в конечном итоге реализует такие функции, как getNearestIntersectionPoint, getIntersectionsOnRect, pathContainsPoint и т. Д.
Что касается вашего дополнительного вопроса, я считаю, что создание текстового поля в верхней части холста, когда пользователь хочет изменить текст, и последующее его уничтожение, когда пользователь заканчивает ввод текста, является наиболее интуитивно понятным способом получения информации. ввод текста. Конечно, вам нужно убедиться, что поле правильно расположено над текстом, который вы редактируете, и чтобы шрифт и размеры шрифта были одинаковыми для единообразного представления.
Желаем удачи в вашем проекте. Дайте мне знать, как это происходит.