Эх... я уже попадал на данный пример из Реализация Drag and Drop
На основе него уже действительно хорошо разобрался и реализовал хороший drag & drop. У меня возникла сложность в другом моменте (при рисовании линий из рис. в теме). Когда я навожу на окружность, я пытаюсь взять абсолютные координаты окружности (чтобы линию привязать к центру окружности независимо, где человек щелкнет и потянет линию. но сама окружность находиться в группе (прямоугольник визуально), и если доставить координаты окружности, то получаю их относительно группы, что не подходит) (линии рисуются в другой группе, чтобы визуально отделить от блоков). На данный момент линии тянуться и располагаются где надо используя координаты курсора мыши и это выглядит немного некрасиво (тоесть человеку, для красоты, нужно щелкать идеально по центру окружности, а я бы хотел бы немного помочь удобней сделать, для этого нужно как-то получить эти координаты). Вижу решение одно, но оно мне не нравиться: это рекурсивно перебирать группы и смотреть их позиционирование распарсивая transform="translate" и суммируя в координату, но скорее это ресурсоемкая будет задачей, когда элементов будет больше
<!-- СЕТКА -->
<g class="grid"><rect width="100%" height="100%" fill="url(#grid)" /></g>
<!-- СЕТКА -->
<!-- СПИСОК КАНАЛОВ -->
<g class="chanel-lines"></g>
<!-- СПИСОК КАНАЛОВ -->
<!-- УСТРОЙТСВА -->
<g class="svg-schema"></g>
<!-- УСТРОЙТСВА -->
Внутри устройств лежат уже сами блоки обернуты в <g> с transform="translate(x y)"... В общем как-то так |
Решение найдено. Готовых методов нет в ES6+ для SVG2.0... Можно только рекурсией к родительскому элементу получить.
решение |
Цитата:
<head>
<script type="text/javascript">
function test(){
let svgns = "http://www.w3.org/2000/svg";
let svg = document.getElementsByClassName('canvas-svg')[0];
let elm_g = document.getElementById("circle");
let CTM = svg.getScreenCTM();
let elm_g_pos_x = (elm_g.getBoundingClientRect().left - CTM.e) / CTM.a;
let path_x = document.createElementNS(svgns, "path");
path_x.setAttributeNS(null, "d", "M"+elm_g_pos_x+",0 v1000");
path_x.setAttributeNS(null, "fill", "transparent");
path_x.setAttributeNS(null, "stroke", "black");
svg.appendChild(path_x);
let elm_g_pos_y = (elm_g.getBoundingClientRect().top - CTM.f) / CTM.d;
let path_y = document.createElementNS(svgns, "path");
path_y.setAttributeNS(null, "d", "M0,"+elm_g_pos_y+" h1000");
path_y.setAttributeNS(null, "fill", "transparent");
path_y.setAttributeNS(null, "stroke", "black");
svg.appendChild(path_y);
let elm_g_pos_cx = elm_g_pos_x + elm_g.getAttributeNS(null, "r") * 1;
let path_cx = document.createElementNS(svgns, "path");
path_cx.setAttributeNS(null, "d", "M"+elm_g_pos_cx+",0 v1000");
path_cx.setAttributeNS(null, "fill", "transparent");
path_cx.setAttributeNS(null, "stroke", "black");
path_cx.setAttributeNS(null, "stroke-dasharray", "4");
svg.appendChild(path_cx);
let elm_g_pos_cy = elm_g_pos_y + elm_g.getAttributeNS(null, "r") * 1;
let path_cy = document.createElementNS(svgns, "path");
path_cy.setAttributeNS(null, "d", "M0,"+elm_g_pos_cy+" h1000");
path_cy.setAttributeNS(null, "fill", "transparent");
path_cy.setAttributeNS(null, "stroke", "black");
path_cy.setAttributeNS(null, "stroke-dasharray", "4");
svg.appendChild(path_cy);
}
window.onload = test;
</script>
</head>
<body>
<svg width="100%" height="100%" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMin slice" x="0" y="0" class="canvas-svg" tabindex="1">
<g transform="translate(100 100)">
<g transform="translate(100 100)">
<circle id="circle" r="50" cx="25" cy="25" fill="yellow" />
</g>
</g>
<svg>
</body>
|
RX200,
на всякий случай getBoundingClientRect() и run [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
рони,
Исправил. А вот красным он не те строки почему то выделяет. от *!* и */!* пришлось отказаться) |
Цитата:
*!* и */!* 123 *!* и */!* |
Цитата:
|
| Часовой пояс GMT +3, время: 06:29. |