Вопрос или проблема
Привет, я создаю приложение на Angular. В рамках этого проекта мне нужно создать сетевые панели, показывающие соединения между двумя устройствами. Например, как на картинке ниже. 
На картинке есть изогнутая пунктирная линия, соединяющая две точки. Я хочу создать что-то подобное, моя фоновая картинка будет другой, но я хочу отобразить маркеры и провести линию между ними. Какие библиотеки/пакеты я могу использовать для достижения этой цели?
Я новичок в разработке фронтенда и создаю это, чтобы визуализировать свою сеть.
[Примечание редактора] в комментарии ниже автор уточняет, что линия должна быть изогнутой.
Попробуйте Google Maps?
Хотя я лично предпочитаю Open Street Maps, который бесплатен и с открытым исходным кодом.
Leaflet — отличный обертка.
Начните с Как использовать Leaflet в веб-приложениях Angular и посмотрите на связанные посты.
Я нашел это очень простым для выполнения вашего запроса. Просто разместите два маркера и соедините их с помощью полилинии (не спрашивайте меня как; ни один из наших сайтов не напишет код за вас; но если вы застряли, опубликуйте ваш код на https://stackoverflow.com/).
Аааа!! Я только что заметил в комментарии, а не в самом вопросе, что линия должна быть изогнутой, поэтому игнорируйте первые 3 ответа и пропустите горизонтальную линию.
Поскольку я совершенно неправильно понял ваш вопрос 2 года назад, вот ответ на настоящий вопрос. Если вы уже решили это, пожалуйста, опубликуйте и примите ответ, чтобы помочь другим, кто прочитает это в будущем.
HTML5 Canvas – Как нарисовать линию на фоне изображения? на S.O. показывает, как сделать это без Angular, используя canvas, но это будет вполне совместимо с Angular.
Этот пример рисования линий в Angular показывает пример.
Ngx Image Drawing позволит пользователям рисовать на ваших изображениях – это не то, что вам нужно, но может быть полезно знать.
Как нарисовать изогнутую линию между 2 точками на canvas? – это снова HTML canvas, но будет работать с Angular.
рисовать изогнутые линии javascript – это заимствованный ответ, но другие ссылки на этой странице могут также помочь. Их много.
Читая ту предыдущую страницу, я понял, что поиск по запросу beziercurveto canvas будет очень полезным. Посмотрите, например, на этот пример и документацию. Также смотрите Руководство пользователя Canvas
На самом деле, просто поиск по запросу draw curved line on image in javascript дает достаточно ответов, поэтому я позволю вам провести собственное исследование.
Надеюсь, вы опубликуете и примете ответ, чтобы помочь другим, кто прочитает этот вопрос в будущем (хотя я сомневаюсь, что вы это сделаете, так как это единственный вопрос, который вы когда-либо задавали, так что я полагаю, что больше не посещаете S.E, и я говорю здесь сам с собой).
Вы накладываете эллипс на две точки и вычисляете его формулу, с помощью формулы вы можете определить каждую точку между подключением двух точек.
- определите центр эллипса, для этого конкретного примера опустите правую точку вниз и переместите левую точку вправо, пока они не встретятся
- с учетом всей имеющейся информации вы можете определить эллипс https://www.youtube.com/watch?v=0pdyKf0yoJM
- с помощью полученной формулы вы можете вычислить каждую точку между двумя точками, выберите небольшое расстояние, чтобы отдельные точки были видны как прямая линия
W3Schools предоставляет интерактивную демонстрацию рисования кривых:
Метод bezierCurveTo() HTML canvas.
Вот пример того, как это можно использовать:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Тест кривой</title>
<style>
#Overlay { width:25em; height:20em; border-style:solid; position:relative; }
#Image { width:100%; height:100%; background-color:#8F8; position:absolute; }
#Canvas { width:100%; height:100%; position:absolute; }
</style>
</head>
<body>
<h1>Тест кривой</h1>
<div id="Overlay">
<div id="Image"> </div>
<canvas id="Canvas" width="1000" height="500">Упс</canvas>
<script>
var c = document.getElementById("Canvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(100,200);
ctx.bezierCurveTo(200,400, 800,400, 800,200);
ctx.stroke();
</script>
</div>
</body>
</html>
Ответ или решение
Создание дашборда для отображения сети в приложении Angular может быть увлекательной задачей для визуализации связей между устройствами. Если вы хотите создать интерфейс, который будет показывать точки подключения и соединяющие их кривые линии, существуют различные пути достижения этой цели с использованием библиотек и подходов, адаптированных под Angular.
1. Выбор подходящей библиотеки
Для выполнения вашей задачи можно рассмотреть несколько библиотек, способных отрисовывать графику и обрабатывать координаты на веб-странице.
1.1 HTML5 Canvas
Canvas является мощным инструментом для рисования графиков и составляет отличную опцию для вашего дашборда. С помощью canvas вы можете:
- Рисовать точки (пины) на изображении фона.
- Соединять эти точки с помощью кривых линий, используя метод
bezierCurveTo.
Пример использования canvas с кривыми линиями:
<canvas id="canvas" width="600" height="400"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Рисуем точки
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(100, 200, 5, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.arc(500, 200, 5, 0, Math.PI * 2);
ctx.fill();
// Рисуем кривую
ctx.beginPath();
ctx.moveTo(100, 200);
ctx.bezierCurveTo(300, 100, 400, 300, 500, 200);
ctx.stroke();
</script>1.2 D3.js
D3.js – это мощная библиотека для работы с данными и визуализацией. В сочетании с Angular, она может быть использована для создания интерактивных графиков и соединений.
- Преимущества: возможность анимации, создание сложных и интерактивных визуализаций.
Ссылка на документацию D3.js: D3 Documentation
1.3 ngx-charts
ngx-charts – библиотека, основанная на D3.js, и оптимизированная для Angular. Она предоставляет простые в использовании компоненты для построения графиков.
- Преимущества: легкая интеграция в Angular-приложение, поддержка различных типов графиков и их настройка.
Ссылка на ngx-charts: ngx-charts
1.4 Leaflet
Если вы решите отобразить данные на карте, библиотека Leaflet будет прекрасным выбором. Хотя основная ее задача – отображение карт, с помощью нее можно соединять точки с помощью линий.
- Преимущества: поддержка карт, возможность интеграции с различными службами географических данных.
Ссылка на Leaflet: Leaflet
2. Реализация в Angular
-
Установите соответствующую библиотеку через npm:
npm install d3 --save # Для D3.js npm install ngx-charts --save # Для ngx-charts -
Импортируйте нужные модули в ваш основной модуль Angular.
-
Создайте компонент для вашего дашборда, где вы будете использовать выбранную библиотеку для визуализации сети.
-
Настройте логику для отображения устройств и их соединений, передавая необходимые данные в выбранные компоненты.
3. Пример кода для Angular с использованием Canvas
Создайте компонент, например, network-dashboard:
import { Component, AfterViewInit } from '@angular/core';
@Component({
selector: 'app-network-dashboard',
template: '<canvas id="networkCanvas" width="800" height="600" style="border:1px solid #000;"></canvas>',
styleUrls: ['./network-dashboard.component.css']
})
export class NetworkDashboardComponent implements AfterViewInit {
ngAfterViewInit() {
const canvas = document.getElementById('networkCanvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d');
// Ваш код для рисования здесь
}
}Заключение
Разработка дашборда для отображения сети с использованием библиотеки Canvas или D3.js может стать отличным способом визуализации связей между устройствами. Убежден, что этот процесс поможет вам не только в изучении Angular, но и даст вам хорошие навыки в визуализации данных. Надеюсь, эта информация окажется полезной в вашем проекте. Если у вас возникнут дополнительные вопросы, смело делитесь ими – сообщество всегда готово помочь!