mirror of
https://github.com/bpmbpm/doc.git
synced 2026-04-30 12:30:52 +00:00
58 lines
No EOL
2.6 KiB
XML
58 lines
No EOL
2.6 KiB
XML
<svg width="700" height="500" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
<defs>
|
|
<rect id="VAD1" width="50" height="30" fill="blue" />
|
|
<rect id="VAD2" width="50" height="30" fill="green" />
|
|
</defs>
|
|
|
|
<use id="box1" href="#VAD1" x="10" y="10" />
|
|
<use id="box2" href="#VAD2" x="100" y="20" />
|
|
<use id="box3" href="#VAD1" x="200" y="10" />
|
|
|
|
<g id="connectors"></g>
|
|
|
|
<script>
|
|
function createConnector(id1, id2) {
|
|
const box1 = document.getElementById(id1);
|
|
const box2 = document.getElementById(id2);
|
|
|
|
const box1Width = 50; // Ширина прямоугольника VAD1
|
|
const box1Height = 30; // Высота прямоугольника VAD1
|
|
const box2Width = 50; // Ширина прямоугольника VAD2
|
|
const box2Height = 30; // Высота прямоугольника VAD2
|
|
|
|
const x1 = parseFloat(box1.getAttribute('x')) + box1Width; // Правый край первого
|
|
const y1 = parseFloat(box1.getAttribute('y')) + box1Height / 2; // Середина высоты первого
|
|
const x2 = parseFloat(box2.getAttribute('x')); // Левый край второго
|
|
const y2 = parseFloat(box2.getAttribute('y')) + box2Height / 2;
|
|
|
|
// Создаем линию
|
|
const connector = document.createElementNS("http://www.w3.org/2000/svg", "line");
|
|
connector.setAttribute("x1", x1);
|
|
connector.setAttribute("y1", y1);
|
|
connector.setAttribute("x2", x2);
|
|
connector.setAttribute("y2", y2);
|
|
connector.setAttribute("stroke", "black");
|
|
connector.setAttribute("stroke-width", "2");
|
|
|
|
// Создаем стрелку
|
|
const arrowHead = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
|
|
const arrowSize = 10; // Размер стрелки
|
|
const angle = Math.atan2(y2 - y1, x2 - x1); // Угол наклона стрелки
|
|
const arrowX = x2 - arrowSize * Math.cos(angle - Math.PI / 6);
|
|
const arrowY = y2 - arrowSize * Math.sin(angle - Math.PI / 6);
|
|
const arrowX2 = x2 - arrowSize * Math.cos(angle + Math.PI / 6);
|
|
const arrowY2 = y2 - arrowSize * Math.sin(angle + Math.PI / 6);
|
|
arrowHead.setAttribute("points", `${x2},${y2} ${arrowX},${arrowY} ${arrowX2},${arrowY2}`);
|
|
arrowHead.setAttribute("fill", "black");
|
|
|
|
document.getElementById('connectors').appendChild(connector);
|
|
document.getElementById('connectors').appendChild(arrowHead);
|
|
}
|
|
|
|
// Создаем соединения между элементами
|
|
createConnector('box1', 'box2');
|
|
createConnector('box2', 'box3'); // Соединяем box2 и box3
|
|
|
|
</script>
|
|
</svg> |