Слияние кода завершено, страница обновится автоматически
Реализованный на vue3.2+ts SVG визуализационный web-компоновочный редактор. Можно использовать SVG файлы и Vue компоненты как графическую библиотеку редактора, предоставляя им функции масштабирования и вращения, а также поддерживая пользовательские расширения параметров и реальное управление состоянием компонентов.
Пример: http://svg.yaolm.top/
Если у вас есть вопросы, пожалуйста, создайте [issue](https://github.com/ Yö lünmao/vue-webtopo-svgeditor/issues), чтобы помочь другим пользователям с аналогичными проблемами.
Для просмотра предыдущих версий используйте другие ветки этого проекта.
Без специальных требований, достаточно настроить графическую библиотеку, чтобы начать работу с компоновкой.
svg файлы являются компонентами, после включения их не требуется дополнительная настройка, редактор автоматически адаптируется и загружает компоненты. Добавление пользовательских компонентов и традиционных html элементов не отличается, нулевой порог входа для фронтенд-разработчиков.
Исправления:
svg или vue компонентов, что делает кастомизацию проще.### Легкость интеграцииПроект уже содержит скрипты в виде библиотеки, компоненты были опубликованы на npm, поддерживают передачу пользовательских компонентов и подписку на события компонентов.
MIT лицензия, разрешающая коммерческое использование (исключение составляют встроенные SVG файлы).
Бессостоятельные компоненты — это SVG файлы, редактор уже предоставляет функции перетаскивания, масштабирования и вращения узлов, поэтому дополнительная настройка не требуется. Если вам нужно динамически управлять цветом, границами и другими атрибутами SVG, вам потребуется настроить props. Пример конфигурации: src\config-center\svg-file\stateless, поддерживаемые атрибуты включают fill, stroke, stroke-dasharray и другие, подробные атрибуты см. в MDN-SVG атрибуты.
svg файлами, но отличаются тем, что конфигурация атрибутов узлов находится в props, в то время как конфигурация состоятельных компонентов находится в state. Преимущество состоятельных компонентов заключается в возможности изменения одного состояния для изменения нескольких атрибутов, например, переключатель в разрывном выключателе одновременно изменяет цвет и прозрачность ручки. Пример конфигурации: src\config-center\svg-file\stateful\circuit-breaker\index.ts. 
### Встроенные анимированные компонентыНичего особенного добавлять не нужно, поддерживается использование встроенных анимированных svg файлов, см. src\config-center\svg-file\have-animation
Суть в том, что это фрагменты кода vue шаблонов, которые могут полностью заменить безымянные и именованные компоненты, и позволяют контролировать больше узлов и атрибутов посредством пользовательского кода. Недостаток в том, что требуется написание кода --! См. src\config-center\svg-file\custom-svg
На самом деле, это похоже на пользовательские svg, это фрагменты кода vue шаблонов. Однако, внутри svg тега невозможно отрендерить html код, поэтому для этого используется foreignObject, что позволяет поддерживать масштабирование и вращение. См. src\config-center\vue
svg файлы следует поместить в директорию src\assets\svgs
svg файлов, удалив атрибуты, которые вы хотите динамически изменять. Например, если вы хотите динамически изменять цвет заливки svg, вам следует удалить атрибут fill из фрагмента кодаsrc\config-centerВажно, чтобы атрибут name конфигурационного файла совпадал с именем svg файла. Если это пользовательский компонент, его следует импортировать по необходимости, см. src\config-center\index.ts. Цель этого шага заключается в том, чтобы при сборке редактора как плагина для других проектов, эти проекты могли бы использовать редактор без необходимости регистрации пользовательских компонентов.## Инструкции по использованиюВыберите библиотеку компонентов слева, удерживая левую кнопку мыши, чтобы перетащить компонент на холст.
После выбора нарисованного узла появляются узлы, которые позволяют перемещать, масштабировать и вращать узел. Панель свойств справа позволяет настроить свойства настроенных узлов, а правый клик мыши позволяет выполнить некоторые быстрые операции.
При перемещении мыши над компонентом появляются узлы для соединения. Левый клик мыши на узле создает линию, продолжительный левый клик мыши создает последовательность линий, а правый клик останавливает создание линий. При перемещении мыши над линией появляются узлы концов линии, которые позволяют перенастроить соединение. Выбранные линии также позволяют настроить анимацию линий на панели анимации справа.
x и y в настройках страницы.svg файлов в этом проекте имеют стандартный размер 1024x1024px. Если ваш компонент не отображается правильно, используйте этот размер.# Создание проекта (для существующего проекта пропустите этот шаг)
npm init vite@latest
# Перейти в директорию проекта
cd projectname
# Установка плагина
pnpm i webtopo-svg-edit
# Установка Pinia
pnpm i pinia
# Изменение main.ts для регистрации Pinia
import { createPinia } from 'pinia';
const app = createApp(App);
app.use(createPinia());
app.mount('#app')
# В нужных страницах импортировать плагин
import { WebtopoSvgEdit, WebtopoSvgPreview } from 'webtopo-svg-edit';
import 'webtopo-svg-edit/dist/style.css'
<!DOCTYPE html>
<html>
<head>
<title>Пример webtopo-svg-edit</title>
<link href="https://unpkg.com/webtopo-svg-edit@0.0.8/dist/style.css" rel="stylesheet" />
<script src="https://unpkg.com/vue@3.2.6/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/vue-demi@0.13.11/lib/index.iife.js"></script>
<script src="https://unpkg.com/pinia@2.0.33/dist/pinia.iife.prod.js"></script>
<script src="https://unpkg.com/webtopo-svg-edit@0.0.8/dist/webtopo-svg-edit.umd.js"></script>
</head>
<body>
<div id="app"></div>
<script>
const pinia = Pinia.createPinia();
const app = Vue.createApp(WebtopoYLM.WebtopoSvgEdit);
app.use(pinia);
app.mount('#app');
</script>
</body>
</html>
```### Интеграция в формате ES модуля
```html
<!DOCTYPE html>
<html>
<head>
<title>Пример webtopo-svg-edit</title>
<link href="https://unpkg.com/webtopo-svg-edit@0.0.8/dist/style.css" rel="stylesheet" />
</head>
<body>
<div id="app"></div>
</body>
</html>
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3.2.47/dist/vue.esm-browser.prod.js",
"@vue/devtools-api": "https://cdn.jsdelivr.net/npm/@vue/devtools-api/lib/esm/index.min.js",
"vue-demi": "https://unpkg.com/vue-demi@0.13.11/lib/index.mjs",
"pinia": "https://unpkg.com/pinia@2.0.29/dist/pinia.esm-browser.js",
"WebtopoYLM": "https://unpkg.com/webtopo-svg-edit@0.0.8/dist/webtopo-svg-edit.es.js"
}
}
</script>
<script type="module">
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { WebtopoSvgEdit } from 'WebtopoYLM'
const app = createApp(WebtopoSvgEdit)
app.use(createPinia())
app.mount('#app')
</script>
Если возникли проблемы с интеграцией, обратитесь к примеру проекта demoВнимание: использование плагина для включения может привести к неправильному отображению иконок на левой панели инструментов. Пожалуйста, найдите загрузчик SVG для вашего инструмента сборки проекта и преобразуйте иконки в символы, назвав их 'svg-xxx', чтобы они отображались правильно
Fork этого проектаFeat_xxx
Pull Request
Принимаются только запросы на слияние из GitHub, Gitee является зеркальной копией GitHub
Компоненты этого проекта-библиотеки взяты из интернета и предназначены только для учебных и обсуждательных целей. Не используйте компоненты этого проекта в коммерческих целях
Для Vue2 рекомендуется использовать интеграцию через iframe или CDN. В настоящее время нет версии для Vue2. Если вы не согласны с этим способом интеграции, вы можете обратиться к ветке 2.1 для модификации.
Используйте pnpm для установки зависимостей
Установите плагин ESLint в VSCode
Компания «吉林省格尺科技有限公司» способствовала появлению этого проекта
秀英童鞋 за терпеливое руководство в развитии этого проектаПроект обучения низкому кодированию (визуальное перетаскивание)
Разработчики, которые продолжают использовать оригинальный svg для конфигурации
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )