Сравнение подхода: EaselJS vs Несколько холстов против скрытого холста для интерактивности

1.) Я нашел canvas API под названием EaselJS, он делает удивительную работу по созданию списка отображения для каждого элемента, который вы рисуете. Они по существу становятся индивидуально узнаваемыми объектами на холсте (на одном холсте)

2.) Затем я увидел на http://simonsarris.com/ об этом учебнике, который может выполнять перетаскивание, и использует скрытую концепцию canvas для выбора.

3.) И третий подход, рабочий подход http://www.lucidchart.com/, который именно то, что я пытаюсь достичь, в основном имеет каждую форму на другой холст и использовать их. Там огромное количество холста.

Вопрос в том, что самый простой способ получить интерактивную сетевую диаграмму, как показано на http://www.lucidchart.com/

Возникает вопрос: лучше ли вводить текст через позиционирование на холсте или использовать несколько холстов (один для рендеринга текста), как в LucidChart

Ответ 1

Я тот, кто сделал учебники в 2. Там много чего происходит, поэтому я попытаюсь немного объяснить.

Я использую скрытый холст для выбора просто потому, что он легко учится и будет работать для ЛЮБОГО вида объекта (текст, сложные пути, прямоугольники, полупрозрачные изображения). В реальной библиотеке диаграмм, которую я пишу, я не делаю ничего подобного, вместо этого я использую много математики для определения выбора. Метод скрытого холста отлично подходит для менее 1000 объектов, но в конечном итоге производительность начинает страдать.

Lucidchart фактически использует более одного холста для каждого объекта. И это не просто их память, они все там DOM. Это организационный выбор, со своей стороны, довольно странный, на мой взгляд. SVG, возможно, сделали их работу намного легче, если это то, что они собираются делать, как будто кажется, что они делают много работы, чтобы иметь возможность подражать тому, как работает SVG. Не так уж много веских причин иметь так много полотна в DOM, если вы можете избежать этого.

Мне кажется, что преимущество этих действий заключается в том, что если у них есть 10 000 объектов, когда вы нажимаете, вам нужно посмотреть только одно (маленькое) холст, который будет нажат для тестирования выбора, вместо весь холст. Поэтому они сделали это, чтобы сделать их код выбора немного короче. Я бы предпочел только один холст в DOM; их путь кажется бесполезным беспорядочным. Пункт холста состоит в том, чтобы иметь быструю поверхность рендеринга вместо тысячи div, представляющих объекты. Но они просто сделали тысячу полотен.

В любом случае, чтобы ответить на ваш вопрос, "самый простой" способ получить интерактивные сетевые диаграммы, такие как lucidchart, - либо использовать библиотеку, либо использовать SVG (или библиотеку SVG). К сожалению, их еще не так много. Пользоваться всеми функциями в Canvas сложно, но, безусловно, можно сделать, и вы получите лучшую производительность, чем SVG, особенно если вы планируете иметь более 5000 объектов на ваших диаграммах. Начиная с EaselJS пока не так уж плохо, но вы, вероятно, обнаружите, что все больше и больше меняете его, когда вы углубляетесь в свой проект.

Я делаю одну такую интерактивную библиотеку диаграмм холста для Northwoods Software, но это не будет сделано еще несколько месяцев.

Чтобы ответить на вопрос, который относится к вашему типу: самый быстрый способ интерактивности, такой как hit-testing, - использовать математику. Любая высокопроизводительная библиотека холста с функциями для поддержки множества различных типов объектов в конечном итоге реализует такие функции, как getNearestIntersectionPoint, getIntersectionsOnRect, pathContainsPoint и т.д.

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

Удачи вам в вашем проекте. Дайте мне знать, как это происходит.

Ответ 1

Ответ 2