Dubly перенесет вас на интеллект-карту — основы

передняя часть Seewo ENOW

Официальный сайт компании:CVTE (Гуанчжоу CVTE)

Команда: enow team центра программных платформ Seewo для будущего образования в рамках CVTE

Автор этой статьи:

предисловие

Ты с нетерпением ждешь мира, надеюсь, у тебя нетbug. Всем привет, я Лин Диан!

Ха-ха-ха, я давно не писал статьи, но написать сегодня снова — это как пообедать с хорошим другом, которого я давно не видел, и вернулось знакомое чувство [смеется~].

Большой интерфейс seewo ENOW также опубликовал более дюжины статей, и это один раунд Спасибо за вашу поддержку и лайки [заправка пера~].

На этой неделе я представляю вам интересную статью с несколькими реальными сценариями разработки — о том, как реализовать интеллект-карту.

Ну... Так как это серия статей, вам нужно подготовиться к длительной битве.Вся серия примерно разделена на следующие главы:

Основы: схема реализации интеллект-карт
Актуальные статьи:react-topicПредварительное построение проекта
Актуальная боевая статья: особенности реализации соединения
Настоящий бой: активные карты

В соответствии с реальной ситуацией, больше может быть написано позже.

Что касается основ, Дэнни в основном предоставит некоторые решения по реализации (не связанные с архитектурой) ментальных карт и представит некоторыеsvgСоответствующие знания, чтобы подготовиться к более поздней стороны.

Картирование разума:"手撸对身体不好"

Тупо:"喂，110，这里有人酒后开车"

Взгляните, прочитав эту статью, вы узнаете:

ясная цель
Идея реализации узла
svgи квадратичные кривые Безье
Реализация идеи подключения

1. Иметь четкую цель

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

XMind:

Воробей:

Процессон:

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

Итак, давайте сначала поговорим о ваших мыслях. На самом деле идея написания этой серии очень проста: консолидировать + поделиться, потому что с этим связана часть текущей работы, и это тоже своего рода консолидация для меня, может быть, когда я пишу статьи, я может производить больше хороших идей, которые используются в реальной работе; кроме того, после работы поделитесь некоторыми существующими решениями по реализации и пообщайтесь с большим количеством мелких партнеров; наконец, если вы считаете, что ваша текущая работа немного скучна, то следуйте за Дэнни, чтобы помочь. Разве составление карт разума не вкусно? [смеется ~].

Что же касается того, что делать в итоге, мы видим, что приведенные выше ментальные карты имеют много общего:

Множество типов, левое и правое расположение поддеревьев (мы называем их картами мозга), организационные схемы, диаграммы «рыбий скелет» и т. д.
Узлы можно перетаскивать и перемещать, чтобы изменить уровень
...

Затем мы также можем реализовать карту разума, подобную приведенной выше, и конечный эффект будет аналогичен следующему:

思维导图演示.gif

Стереотип продукта некоммерческий (коммерческим быть очень сложно), поэтому можно попрактиковаться своими руками.Надеюсь, что в этом процессе можно чему-то научиться奇怪的知识.

2. Идеи реализации узлов

2.1 Выбор схемы

Реализация ментальной карты, основная часть это не что иное, как два пункта:

узел (тема)
соединять

Для реализации узлов также существует множество схем, будь то с использованием обычныхDOMэлемент или использоватьsvg, Все будет хорошо.

Например, в Yuque нужно использоватьsvgизpathэлемент:

Затем при входе в состояние редактирования включитеDOMэлементальcontenteditableАтрибуты:

Эта реализация напоминает мнеbpmn.js, это тоже полностьюsvgсоставляют:

(Хи-хи, раз я говорил об этом, эй, поднимите волну и подтолкните волну:"Самый подробный учебник по bpmn во всей сети")

И дляprocesson, приятель, еще более жестоко... используя абсолютное позиционирование напрямую:

Здесь также есть рекомендуемая реализация:DOMэлемент +flexмакет.

2.2 Элементы DOM + гибкий макет

выберитеDOMПричины внедрения узлов: простота в эксплуатации,APIБогатый, но также легко расширяемый.

Для реализации ее положения, например, для карты мозга, мы можем разделить ее целиком на три части:

левое поддерево
корневой узел
правое поддерево

Расположение этих трех частей относительно фиксировано по порядку, тогда мы можем использоватьflexв макетеorderсвойства для завершения общего макета ментальной карты.

Как насчет части поддерева? Мы также можем использоватьflexСхема реализована, например, вся синяя рамка на следующем рисунке — это правое поддерево, а зеленая рамка — один узел поддерева:

Преимущество этого также очевидно: когда содержимое узла часто меняется, нам не нужно вручную вычислять положение каждого узла.flexЭто уже помогло нам сделать эти вещи хорошо, добиться динамической адаптивной верстки.

Мы можем просто написать небольшойdemoПосмотрим на эффект:

html-код:

<div class="mindMap">
  <div class="node rootNode">根节点</div>
  <div class="node subTree left">
    <div class="treeNode">子节点</div>
    <div class="treeNode">子节点</div>
    <div class="treeNode">子节点</div>
  </div>
  <div class="node subTree right">
    <div class="treeNode">子节点</div>
    <div class="treeNode">子节点</div>
    <div class="treeNode">子节点</div>
  </div>
</div>

css-код:

.mindMap {
  display: flex;
  align-items: center;
}
.node {
  width: 200px;
  background: rgb(192 214 255);
  text-align: center;
  color: #fff;
}
.rootNode {
  order: 2;
  background: #65bfff;
  height: 50px;
}
.left {
  order: 1;
}
.right {
  order: 3;
}
.subTree {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.treeNode {
  background-color: #ff6969;
}
.left .treeNode {
  margin-right: 56px;
}
.right .treeNode {
  margin-left: 56px;
}
.treeNode:not(:first-child) {
  margin-top: 24px;
}

Итоговый эффект следующий (уродливое уродливое... Кашель смотрит на это, хахаха):

3. SVG и квадратичная кривая Безье

3.1 Введение в SVG

Прежде чем продолжить следующий контент, давайте немного познакомимся с наукой.svgЕго содержание тесно связано с некоторыми из наших более поздних схем реализации, поэтому я должен гарантировать, что у вас не будет базовых знаний.

svgДля масштабируемой векторной графики он используетXMLформат для определения изображения. Мы можем использоватьdivИспользуйте тот же тег прямо в коде:

<svg width="300" height="300">
  <line x1="0" y1="0" x2="200" y2="0" />
</svg>

И дляCSSсвойство, которое имеет три собственных уникальных свойства:

fill: Цвет заливки
stroke: цвет обводки
stroke-width: ширина рамки

можно поставитьsvgДумайте о этикетке как оhtmlтеги, а затем вы можете добавитьpath、line、rectи другие элементы для получения полной векторной иллюстрации.

Некоторые из наших общих тегов:

строка, метка строки:

Эффект:

Прямоугольник, прямоугольная метка:

Эффект:

путь, тег пути:

Эффект:

Эллипс, ярлык эллипса:

Эффект:

3.2 элемент пути

Для некоторых других элементов я не буду раскрывать это здесь, вы можете проверить это.«Введение в SVG — как писать от руки»Эта статья. ноpathЭлемент Мне все же придется рассказать о нем отдельно, потому что именно его реализует наша функция"主力军".

pathЭлементы можно использовать для создания линий, кривых, дуг и многого другого. Форма элемента пути определяется атрибутамиd, АтрибутыdЗначение“命令 + 参数”последовательность из.

Что ты имеешь в виду? Как следующий код:

<svg>
  <path d="M10 10 L90 10"
    stroke="rgb(0,0,0)" stroke-width="5"
  ></path>
</svg>

Это означает, что нужно нарисовать путь на странице, а затем путь следует:

перейти к точке с координатами (10, 10);
Проведите линию к точке с координатами (90, 10).

(M: Move toперейти к определенной координате;L: Line toпровести линию между двумя координатами)

Конечный эффект:

Легко ли это понять?

3.3 Квадратичная кривая Безье Q

Все знакомы с кривыми Безье, верно?pathЕсть и элементы. И он делится на два вида кривых Безье:

кубическая кривая БезьеC
Квадратичная кривая БезьеQ

кубическая кривая БезьеCОн определяется одной точкой и двумя контрольными точками.Это относительно сложно.Остановимся на квадратичной кривой Безье.Q.

Это тип гладкой кривой, используемый в элементе пути.Определение квадратичной кривой Безье требует трех наборов параметров:

координаты начальной точки
Координаты контрольной точки
Координаты конечной точки

Контрольная точка описывает наклон начальной точки кривой, а наклон каждой точки кривой представляет собой постепенный процесс от начального наклона к конечному наклону.

Как и на картинке выше, красные точки представляют точку и ее контрольные точки соответственно.

Следующий код:

<svg>
  <path
    path d="M10 80 Q 95 10 180 80"
    stroke="black" fill="transparent"
  ></path>
</svg>

Это означает, что нужно нарисовать путь на странице, а затем путь следует:

перейти к точке с координатами (10, 80);
Координаты контрольной точки: (95, 10);
Координаты конечной точки (180, 80);
Получите наклон начала и конечных точек от контрольных точек и нарисуйте кривую между ними.

Конечный эффект:

4. Реализация идеи подключения

Так много было введено вышеsvgСоответствующие знания, интересно, есть ли у вас какие-то идеи, чтобы реализовать связь в карте?

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

Эту конкретную позицию также легче понять, потому что это ветвь, поэтому она должна быть между двумя узлами, такими как корневой узел и его дочерний узел первого уровня справа, мы можем взять среднюю точку самого правого узла корневой узел и крайняя левая средняя точка дочернего узла первого уровня.

Если для следующего прямого ответвления достаточно знать только координаты этих двух точек (синие точки на рисунке):

Но что, если это для такого кривого пути?

Он может использовать квадратичную кривую Безье, о которой мы упоминали выше.QВ это время в качестве начальной точки кривой можно использовать координату в корневом узле, а в качестве конечной точки кривой можно использовать координату в теме ветки. Но мы знаем, что недостаточно знать только координаты начальной и конечной точки, нам также нужна контрольная точка, чтобы хорошо реализовать кривую.

Скриншот выше сделанXMindРеализация интеллект-карты, показанная выше, может не видеть связи между линиями и узлами.Давайте переместим ее ветви и разместим их в крайнем правом углу центральной темы:

Теперь это более интуитивно понятно (при условии, что мы даем этим точкам еще одну координату):

Начальная точка: (x1, y1) => (100, 60)
Контрольная точка: (x1, y2) => (100, 10)
Конечная точка: (x2, y2) => (150, 10)

(Координаты здесь — начальная точка координатной оси в верхнем левом углу общей ментальной карты)

Затем, чтобы получить такую кривую, нужна только следующая строка кода:

<svg>
  <path
    d="M100 60 Q 100 10 150 10"
    fill="transparent"
    stroke="rgb(102, 102, 102)"
    stroke-width="4"
  ></path>
</svg>

Ха~ Это чувствуется внутри [смеется~].

Нам просто нужно реализовать еще один проход и дваDOMинформацию, а затем рассчитать начальную точку, конечную точку и метод контрольной точки, чтобы легко реализовать соединение.

Справочная статья

Знания бесценны и поддерживают оригинальность.

Справочная статья:

MDN-SVG
«Введение в SVG — как писать от руки»

послесловие

Эта статья в основном представлена здесь.После прочтения полного текста кажется, что создать интеллект-карту вручную очень просто. Это потому, что у нас все еще есть много проблем, которые мы не рассмотрели, например, как реализовать различные типы интеллект-карт, выбор фреймов узлов, перетаскивание узлов и так далее.

Как описано в предисловии, эта статья в основном предоставляет некоторые решения по реализации (неархитектурные аспекты) интеллект-карт и знакомит с некоторымиsvgсоответствующие знания. Я создам проект позже, и я передам его всем в реальном бою, поэтому, пожалуйста, ставьте лайк и подписывайтесь, иначе вы можете скучать по мне... Спасибо.