В каком направлении копать, чтобы сделать это?

@Eclectoi · Регистрация: 06.12.2019

Author24 — интернет-сервис помощи студентам

Как это сделать?

@diadiavova · 22.01.2020, 15:22

Сообщение от Eclectoi

Как это сделать?

SVG с подобными вещами неплохо справляется. Маленький пример

PHP/HTML

<!DOCTYPE html>
<html>
 
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Four sectors circle</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
 
<body>
    <h1>Круг из четырех секторов</h1>
    <style>
        #g56:hover {
            stroke: black;
        }
    </style>
    <svg 
 
 
    
        xmlns="http://www.w3.org/2000/svg" 
        id="svg8" version="1.1" viewBox="0 0 150 150" height="150mm" width="150mm">
        <defs id="defs2" />
        <g id="layer1">
            <g style="opacity:1;fill:#ffff00" transform="rotate(126.77392,94.629659,101.38614)" id="g56">
                <path id="path10" style="fill:#ffff00;stroke-width:0.24594615"
                    d="m -171.99999,75 a 24.880941,25 0 0 1 -7.32961,17.719914 24.880941,25 0 0 1 -17.67039,7.2798 L -196.88094,75 Z"
                    transform="rotate(-90)" />
                <path id="path10-3" style="fill:#ffff00;stroke-width:0.24594621"
                    d="m -50.000002,-197 a 24.880941,25 0 0 1 -7.329603,17.71991 24.880941,25 0 0 1 -17.670397,7.2798 L -74.880943,-197 Z"
                    transform="scale(-1)" />
                <path id="path10-7" style="fill:#ffff00;stroke-width:0.24594615"
                    d="m 99.999998,197 a 24.880941,25 0 0 1 -7.329603,17.71991 24.880941,25 0 0 1 -17.670397,7.2798 L 75.119057,197 Z" />
                <path id="path10-6" style="fill:#ffff00;stroke-width:0.24594615"
                    d="m 222.00001,-75 a 24.880941,25 0 0 1 -7.32961,17.719914 24.880941,25 0 0 1 -17.67039,7.2798 L 197.11906,-75 Z"
                    transform="rotate(90)" />
            </g>
        </g>
    </svg>
    
    
    <script>
    document.getElementById("g56").addEventListener("click", function (evt)
        {
            let txt = "";
            switch (evt.target.id)
            {
                case "path10":
                    txt = "3"
                    break;
                case "path10-3":
                    txt = "2"
                    break;
                case "path10-6":
                    txt = "1"
                    break;
                case "path10-7":
                    txt = "4"
                    break;
 
                default:
                    break;
            }
            alert(txt);
        });
    </script>
 
</body>
 
</html>

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

@Eclectoi · 22.01.2020, 19:10 **[ТС]**

Сообщение от diadiavova

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

а как сделать передвижение?

Добавлено через 38 минут

Сообщение от diadiavova

но свг с этим тоже легко справится.

Где можно найти гайд по svg?

@Qwerty_Wasd · 23.01.2020, 02:00

diadiavova, здравствуй

Eclectoi,

Сообщение от Eclectoi

Где можно найти гайд по svg?

https://developer.mozilla.org/en-US/docs/Web/SVG
https://developer.mozilla.org/... _with_SMIL
https://www.w3.org/TR/REC-smil/
https://www.w3.org/TR/SVG/animate.html

@diadiavova · 23.01.2020, 02:11

Сообщение от Eclectoi

а как сделать передвижение?

Что значит передвижение? Поменять координаты программно, двигать что-то мышкой, анимировать движение или еще что-то?

Сообщение от Eclectoi

Где можно найти гайд по svg?

Да собственно гуглится все довольно легко. Но если нужно какой-то систематический курс, то можно на интуите пройти
НОУ ИНТУИТ | Масштабируемая векторная графика | Информация
Сейчас может уже что-то и получше есть, но курс вполне актуальный.
Детали формата ищи в спецификации
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
Поиск по конкретным фичам тоже дает много полезного.
Вот еще
SVG - учебное руководство - SVG | MDN

Добавлено через 51 секунду

Сообщение от Qwerty_Wasd

diadiavova, здравствуй

@Eclectoi · 23.01.2020, 05:16 **[ТС]**

Сообщение от diadiavova

двигать что-то мышкой

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

@diadiavova · 23.01.2020, 13:14

Сообщение от Eclectoi

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

Так это вопрос не по SVG, а скорее по работе с DOM. При клике нужно программно создать все элементы из которых кнопка состоит, добавить их в документ, разместить где надо и привязать обработчики событий, с помощью которых объекты можно двигать мышкой. Там есть нюансы, например для создания элементов SVG нужно использовать не createElement, а createElementNS, передавая ей помимо имени элемента еще пространство имен свг, ну и тому подобные вещи там имеют место, но в общем и целом при наличии понимания процесса работы с DOM - разобраться несложно.

Добавлено через 1 час 59 минут
Eclectoi, я тут немного пошаманил, чтобы тебе было понятно по крайней мере как действовать с теми элементами, работа с которыми отличается от работы с обычными хтмл-элементами.

Собственно по поводу того, как двигать элементы мышкой вот тут есть статья
Draggable SVG elements
Но тут есть небольшая проблема: не смотря на то, что принцип перемещения элементов тут описан, могут возникнуть проблемы с некоторыми свг-элементами. Например, элемент g, используемый для группировки других элементов, не подчиняется обычным правилам, ну там стилям и т.п. Можно, конечно, поколдовать и что-то найти, но, тем не менее, если посмотреть как вопросы решают люди, например здесь
position - SVG Positioning - Stack Overflow
d3.js - How to move elements along with svg group - Stack Overflow
то они все в один голос используют для этого трансформации. Поэтому я набросал еще примерчик, где при нажатии на основную кнопку появится еще одна внизу, а уже при нажатии на нее, она будет перемещаться вниз-вправо на 10 пикселей в каждом направлении. Соединить это с логикой перетягивания мышкой - это уже дело техники.

PHP/HTML

<!DOCTYPE html>
<html>
 
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Four sectors circle</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
 
<body>
    <h1>Круг из четырех секторов</h1>
 
    <style>
        .custom-button>use {
            fill: rgb(202, 20, 36);
        }
 
        .custom-button:hover {
            stroke: black;
        }
    </style>
 
    <svg id="svg1" version="1.1" viewBox="0 0 500 500" height="500mm" width="500mm">
        <defs>
            <path id="sector" d="M 0,0 V 25 A 25,25 0 0 0 25,0 Z" />
        </defs>
        <g id="g1" class="custom-button">
            <use xlink:href="#sector" transform="translate(25 25) rotate(45) " />
            <use xlink:href="#sector" transform="translate(25 25) rotate(135)" />
            <use xlink:href="#sector" transform="translate(25 25) rotate(-45)" />
            <use xlink:href="#sector" transform="translate(25 25) rotate(-135)" />
        </g>
    </svg>
    <script>
        let btntop = 0, btnid = 1;
        let svg1 = document.getElementById("svg1");
        document.getElementById("g1").addEventListener("click", function (evt)
        {
            let newButton = document.getElementById("g1").cloneNode(true);
            console.log(newButton);
            newButton.id = "g" + ++btnid;
            setGPos(newButton, 0, 50);
            svg1.appendChild(newButton);
            newButton.addEventListener("click", function (cloneEvt)
            {
                moveGPos(newButton, 10, 10);
            });
 
        });
 
        function setGPos(g, x, y)
        {
 
            let translate = svg1.createSVGTransform();
            translate.setTranslate(x, y);
            g.transform.baseVal.initialize(translate);
 
        }
 
        function moveGPos(g, x, y)
        {
            let translate = svg1.createSVGTransform();
            translate.setTranslate(x, y);
            g.transform.baseVal.appendItem(translate);
        }
    </script>
</body>
 
</html>

@Eclectoi · 23.01.2020, 20:01 **[ТС]**

Сообщение от diadiavova

это уже дело техники.

на самом деле выглядит очень complicated, но, с кучей материала, думаю, разберусь. Спасибо вам!

@diadiavova · 23.01.2020, 21:20

Сообщение от Eclectoi

на самом деле выглядит очень complicated

Да собственно в статье по дрэггэйблу есть все готовые коды. Вот взял оттуда и прилепил к своему примеру. Теперь по кнопкам надо не кликать, а тянуть их мышью. Просто в статье все подробно объясняется, поэтому прочитать ее все равно стоит.

PHP/HTML

<!DOCTYPE html>
<html>
 
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Four sectors circle</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
 
<body>
    <h1>Круг из четырех секторов</h1>
 
    <style>
        .custom-button>use {
            fill: rgb(202, 20, 36);
        }
 
        .custom-button:hover {
            stroke: black;
        }
    </style>
 
    <svg id="svg1" version="1.1" viewBox="0 0 500 500" height="500mm" width="500mm">
        <defs>
            <path id="sector" d="M 0,0 V 25 A 25,25 0 0 0 25,0 Z" />
        </defs>
        <g id="g1" class="custom-button" >
            <use xlink:href="#sector" transform="translate(25 25) rotate(45) "  class="draggable"/>
            <use xlink:href="#sector" transform="translate(25 25) rotate(135)"  class="draggable"/>
            <use xlink:href="#sector" transform="translate(25 25) rotate(-45)"  class="draggable"/>
            <use xlink:href="#sector" transform="translate(25 25) rotate(-135)"  class="draggable"/>
        </g>
    </svg>
    <script>
        let btntop = 0, btnid = 1;
        let svg1 = document.getElementById("svg1");
        document.getElementById("g1").addEventListener("click", function (evt)
        {
            let newButton = document.getElementById("g1").cloneNode(true);
            console.log(newButton);
            newButton.id = "g" + ++btnid;
            setGPos(newButton, 0, 50);
            svg1.appendChild(newButton);
            newButton.addEventListener("mousedown", startDrag);
            newButton.addEventListener("mousemove", drag);
 
        });
 
        function getMousePosition(evt)
        {
            var CTM = svg1.getScreenCTM();
            return {
                x: (evt.clientX - CTM.e) / CTM.a,
                y: (evt.clientY - CTM.f) / CTM.d
            };
        }
 
 
 
        var selectedElement, offset, transform;
        function startDrag(evt)
        {
            if (evt.target.classList.contains('draggable') && evt.buttons===1)
            {
                selectedElement = evt.target.parentNode;
                offset = getMousePosition(evt);
                
                // Get all the transforms currently on this element
                var transforms = selectedElement.transform.baseVal;
                // Ensure the first transform is a translate transform
                if (transforms.length === 0 ||
                    transforms.getItem(0).type !== SVGTransform.SVG_TRANSFORM_TRANSLATE)
                {
                    // Create an transform that translates by (0, 0)
                    var translate = svg.createSVGTransform();
                    translate.setTranslate(0, 0);
                    // Add the translation to the front of the transforms list
                    selectedElement.transform.baseVal.insertItemBefore(translate, 0);
                }
                // Get initial translation amount
                transform = transforms.getItem(0);
                offset.x -= transform.matrix.e;
                offset.y -= transform.matrix.f;
            }
        }
 
        function drag(evt)
        {
            if (selectedElement && evt.buttons === 1)
            {
                evt.preventDefault();
                var coord = getMousePosition(evt);
                transform.setTranslate(coord.x - offset.x, coord.y - offset.y);
            }
        }
 
    </script>
</body>
 
</html>

@Eclectoi · 24.01.2020, 06:01 **[ТС]**

Сообщение от diadiavova

</html>

что то ничего не передвигается

@diadiavova · 24.01.2020, 08:43

Сообщение от Eclectoi

что то ничего не передвигается

Что-то менял, удалял, в результате выложил не ту версию, которая работала. Бывает )) Сейчас вроде та ))

PHP/HTML

<!DOCTYPE html>
<html>
 
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Four sectors circle</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
 
<body>
    <h1>Круг из четырех секторов</h1>
 
    <style>
        .custom-button>use {
            fill: rgb(202, 20, 36);
        }
 
        .custom-button:hover {
            stroke: black;
        }
    </style>
 
    <svg id="svg1" version="1.1" viewBox="0 0 500 500" height="500mm" width="500mm">
        <defs>
            <path id="sector" d="M 0,0 V 25 A 25,25 0 0 0 25,0 Z" />
        </defs>
        <g id="g1" class="custom-button">
            <use xlink:href="#sector" transform="translate(25 25) rotate(45) " class="draggable" />
            <use xlink:href="#sector" transform="translate(25 25) rotate(135)" class="draggable" />
            <use xlink:href="#sector" transform="translate(25 25) rotate(-45)" class="draggable" />
            <use xlink:href="#sector" transform="translate(25 25) rotate(-135)" class="draggable" />
        </g>
    </svg>
    <script>
        let btnid = 1;
        let svg1 = document.getElementById("svg1");
        document.getElementById("g1").addEventListener("click", function (evt)
        {
            let newButton = document.getElementById("g1").cloneNode(true);
            newButton.id = "g" + ++btnid;
            //setGPos(newButton, 0, 50);
            svg1.appendChild(newButton);
            newButton.setAttribute("transform", 'translate(0,50)');
            newButton.addEventListener("mousedown", startDrag);
            newButton.addEventListener("mousemove", drag);
 
        });
 
        function getMousePosition(evt)
        {
            var CTM = svg1.getScreenCTM();
            return {
                x: (evt.clientX - CTM.e) / CTM.a,
                y: (evt.clientY - CTM.f) / CTM.d
            };
        }
 
 
 
        var selectedElement, offset, transform;
        function startDrag(evt)
        {
            if (evt.target.classList.contains('draggable') && evt.buttons === 1)
            {
                selectedElement = evt.target.parentNode;
                offset = getMousePosition(evt);
 
                // Get all the transforms currently on this element
                var transforms = selectedElement.transform.baseVal;
                // Ensure the first transform is a translate transform
                if (transforms.length === 0 ||
                    transforms.getItem(0).type !== SVGTransform.SVG_TRANSFORM_TRANSLATE)
                {
                    // Create an transform that translates by (0, 0)
                    var translate = svg1.createSVGTransform();
                    translate.setTranslate(0, 0);
                    // Add the translation to the front of the transforms list
                    selectedElement.transform.baseVal.insertItemBefore(translate, 0);
                }
                // Get initial translation amount
                transform = transforms.getItem(0);
                offset.x -= transform.matrix.e;
                offset.y -= transform.matrix.f;
            }
        }
 
        function drag(evt)
        {
            if (selectedElement && evt.buttons === 1)
            {
                evt.preventDefault();
                var coord = getMousePosition(evt);
                transform.setTranslate(coord.x - offset.x, coord.y - offset.y);
            }
        }
 
    </script>
</body>
 
</html>

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

@Eclectoi · 27.01.2020, 19:45 **[ТС]**

У меня есть код кнопки базы (огромное спасибо diadiavova), прочитал статьи, просмотрел гугл - что то ничего не нашел, как делать следующее задание. акаксделоть...

PHP/HTML

<!DOCTYPE html>
<html>
 
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Four sectors circle</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
 
<body>
    <h1>Круг из четырех секторов</h1>
 
    <style>
        .custom-button>use {
            fill: rgb(202, 20, 36);
        }
 
        .custom-button:hover {
            stroke: black;
        }
    </style>
 
    <svg id="svg1" version="1.1" viewBox="0 0 500 500" height="500mm" width="500mm">
        <defs>
            <path id="sector" d="M 0,0 V 25 A 25,25 0 0 0 25,0 Z" />
        </defs>
        <g id="g1" class="custom-button">
            <use xlink:href="#sector" transform="translate(25 25) rotate(45) " class="draggable" />
            <use xlink:href="#sector" transform="translate(25 25) rotate(135)" class="draggable" />
            <use xlink:href="#sector" transform="translate(25 25) rotate(-45)" class="draggable" />
            <use xlink:href="#sector" transform="translate(25 25) rotate(-135)" class="draggable" />
        </g>
    </svg>
    <script>
        let btnid = 1;
        let svg1 = document.getElementById("svg1");
        document.getElementById("g1").addEventListener("click", function (evt)
        {
            let newButton = document.getElementById("g1").cloneNode(true);
            newButton.id = "g" + ++btnid;
            //setGPos(newButton, 0, 50);
            svg1.appendChild(newButton);
            newButton.setAttribute("transform", 'translate(0,50)');
            newButton.addEventListener("mousedown", startDrag);
            newButton.addEventListener("mousemove", drag);
 
        });
 
        function getMousePosition(evt)
        {
            var CTM = svg1.getScreenCTM();
            return {
                x: (evt.clientX - CTM.e) / CTM.a,
                y: (evt.clientY - CTM.f) / CTM.d
            };
        }
 
 
 
        var selectedElement, offset, transform;
        function startDrag(evt)
        {
            if (evt.target.classList.contains('draggable') && evt.buttons === 1)
            {
                selectedElement = evt.target.parentNode;
                offset = getMousePosition(evt);
 
                // Get all the transforms currently on this element
                var transforms = selectedElement.transform.baseVal;
                // Ensure the first transform is a translate transform
                if (transforms.length === 0 ||
                    transforms.getItem(0).type !== SVGTransform.SVG_TRANSFORM_TRANSLATE)
                {
                    // Create an transform that translates by (0, 0)
                    var translate = svg1.createSVGTransform();
                    translate.setTranslate(0, 0);
                    // Add the translation to the front of the transforms list
                    selectedElement.transform.baseVal.insertItemBefore(translate, 0);
                }
                // Get initial translation amount
                transform = transforms.getItem(0);
                offset.x -= transform.matrix.e;
                offset.y -= transform.matrix.f;
            }
        }
 
        function drag(evt)
        {
            if (selectedElement && evt.buttons === 1)
            {
                evt.preventDefault();
                var coord = getMousePosition(evt);
                transform.setTranslate(coord.x - offset.x, coord.y - offset.y);
            }
        }
 
    </script>
</body>
 
</html>

@diadiavova · 28.01.2020, 15:57

Сообщение от Eclectoi

что то ничего не нашел, как делать следующее задание. акаксделоть...

В гуглах обычно типовые задачи ищут. Здесь нужно было спрашивать, как объединить элементы, чтобы можно было с ними работать как с единым целым. Но на этот вопрос я, в принципе, уже ответил. Элементы нужно объединить в группу и работать с группой. В код обработчиков событий надо внести изменения так, чтобы в качестве selectedElement выбиралась именно группа.
В принципе для упаковки нескольких элементов в группу можно использовать примерно следующий код

Javascript

    <script>
        function addGroup(elems)
        {
            let group = document.createElementNS("http://www.w3.org/2000/svg", "g");
            let parent = elems[0].parentNode;
            for (let e of elems)
            {
                group.appendChild(e);
            }
            parent.appendChild(group);
        }
    </script>
    <button onclick="addGroup([document.getElementById('g1')]);">Add group</button>

Здесь по клику функции передается один элемент, но легко отследить в инспекторе, что он упаковывается, но также можно передавать и несколько, поскольку функция принимает массив. Главное, чтобы элементы находились в одном контейнере(хотя тоже не критично). Естественно группу нужно создавать не пустую, а подготовить ее должным образом, ну например, код, который двигает группы работает с теми, у которых есть класс draggable, значит надо его туда добавить и т. д. То есть в принципе, как я уже говорил выше, если есть навыки работы с DOM, то каких-то непреодолимых трудностей возникнуть не должно.

Добавлено через 20 минут
Наверно добавлять группу лучше как-то так

Javascript

        function addGroup(elems)
        {
            let group = document.createElementNS("http://www.w3.org/2000/svg", "g");
            let parent = elems[0].parentNode;
            parent.insertBefore(group,elems[0]);
            for (let e of elems)
            {
                group.appendChild(e);
            }
        }

Тогда она встанет на место первого из группируемых элементов, а не в конец списка. Вряд ли это принципиально, поскольку группа не является графическим элементом и просто объединяет другие элементы, тем не менее, так, видимо, будет все-таки логичнее что ли.

@Eclectoi · 28.01.2020, 19:46 **[ТС]**

Сообщение от diadiavova

Наверно добавлять группу лучше как-то так

а куда этот код добавлять, или вместо чего?

@diadiavova · 29.01.2020, 13:01

Сообщение от Eclectoi

а куда этот код добавлять, или вместо чего?

Это всего лишь вспомогательная функция, с помощью которой можно объединить несколько объектов в группу. Просто собираешь объекты в массив и передаешь этой функции. Ее немного надо бы доделать, например добавить группе класс. Попытаюсь объяснить для чего это надо, раз уж прежних объяснений не хватило.
Вот взять, к примеру, тот объект, который ты называешь кнопкой. Что он из себя представляет? Выглядит он как круг, но на самом деле это составной объект, состоящий из четырех секторов. Что нам позволяет работать с ним как с единым объектом? То, что мы объединили все его компоненты в группу, разместив их в элементе <g></g>. Благодаря этому обстоятельству мы можем задавать трансформации всей группе и элементы группы будут действовать как одно целое.
Теперь к тому, что нужно тебе сделать на данном этапе. Ты хочешь, чтобы эти кнопки были каким-то образом связаны, да еще и чтобы связь была визуализирована с помощью линии. Мало того, тебе нужно чтобы это не только выглядело как связь, но и в некоторых ситуациях все эти элементы вели себя как единое целое. Ну, собственно, решение тут то же самое. Объединяешь две кнопки и линию в одну группу, то есть упаковываешь их в элемент g и дальше, когда нужно перемещать все, ты опять-таки воздействуешь уже не на каждый элемент, а на всю группу. Функция, которую я показал выше, поможет тебе упаковать несколько объектов в одну группу. Возможно там еще неплохо было бы в конце добавить

Javascript

1	return group;

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

Добавлено через 29 минут
Хотя сейчас посмотрел, видимо немного неправильно понял задачу. Когда кнопка движется, то за ней следует только связь, а вторая кнопка на месте. Но тут решение простое: в те блоки кода, которые передвигают группу, нужно добавить логику перемещения линий.

Javascript

        function startDrag(evt)
        {
            if (evt.target.classList.contains('draggable') && evt.buttons === 1)
            {
                selectedElement = evt.target.parentNode;
                offset = getMousePosition(evt);
 
                // Get all the transforms currently on this element
                var transforms = selectedElement.transform.baseVal;
                // Ensure the first transform is a translate transform
                if (transforms.length === 0 ||
                    transforms.getItem(0).type !== SVGTransform.SVG_TRANSFORM_TRANSLATE)
                {
                    // Create an transform that translates by (0, 0)
                    var translate = svg1.createSVGTransform();
                    translate.setTranslate(0, 0);
                    // Add the translation to the front of the transforms list
                    selectedElement.transform.baseVal.insertItemBefore(translate, 0);
                    // Сюда добавляем логику перемещения линий
                }
                // Get initial translation amount
                transform = transforms.getItem(0);
                offset.x -= transform.matrix.e;
                offset.y -= transform.matrix.f;
            }
        }
 
        function drag(evt)
        {
            if (selectedElement && evt.buttons === 1)
            {
                evt.preventDefault();
                var coord = getMousePosition(evt);
                transform.setTranslate(coord.x - offset.x, coord.y - offset.y);
               // Сюда добавляем логику перемещения линий
            }
        }

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

@Eclectoi · 29.01.2020, 21:10 **[ТС]**

Сообщение от diadiavova

Я там добавил комментарии в тех местах, где надо двигать линию.

ага, увидел, спасибо. Двигать линию как? придется изучить dom и svg...

@diadiavova · 29.01.2020, 21:17

Сообщение от Eclectoi

Двигать линию как?

Дык это как раз проще пареной репы. У нее есть атрибуты x1, x2, y1 и y2. С их помощью устанавливаются начало и конец линии. Естественно надо просчитать это все, в зависимости от расположения самих кнопок.

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

@Eclectoi 0 / 0 / 0 Регистрация: 06.12.2019 Сообщений: 83
		1
	В каком направлении копать, чтобы сделать это? 22.01.2020, 09:48. Показов 1944. Ответов 16 Метки нет (Все метки) Как это сделать? Миниатюры 0

@Eclectoi 0 / 0 / 0 Регистрация: 06.12.2019 Сообщений: 83
	22.01.2020, 19:10 [ТС]	3
	Сообщение от diadiavova Круг может кривоват малость, делал в Inkscape просто для наглядности, ну и по кликам просто алерт выскакивает с номером сектора, логику дополнительных построений писать надо, но свг с этим тоже легко справится. а как сделать передвижение? Добавлено через 38 минут Сообщение от diadiavova но свг с этим тоже легко справится. Где можно найти гайд по svg? 0

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	23.01.2020, 02:00	4
	diadiavova, здравствуй Eclectoi, Сообщение от Eclectoi Где можно найти гайд по svg? https://developer.mozilla.org/en-US/docs/Web/SVG https://developer.mozilla.org/... _with_SMIL https://www.w3.org/TR/REC-smil/ https://www.w3.org/TR/SVG/animate.html 1

@diadiavova 6219 / 2467 / 725 Регистрация: 11.04.2015 Сообщений: 3,987 Записей в блоге: 43
	23.01.2020, 02:11	5
	Сообщение от Eclectoi а как сделать передвижение? Что значит передвижение? Поменять координаты программно, двигать что-то мышкой, анимировать движение или еще что-то? Сообщение от Eclectoi Где можно найти гайд по svg? Да собственно гуглится все довольно легко. Но если нужно какой-то систематический курс, то можно на интуите пройти НОУ ИНТУИТ \| Масштабируемая векторная графика \| Информация Сейчас может уже что-то и получше есть, но курс вполне актуальный. Детали формата ищи в спецификации Scalable Vector Graphics (SVG) 1.1 (Second Edition) Поиск по конкретным фичам тоже дает много полезного. Вот еще SVG - учебное руководство - SVG \| MDN Добавлено через 51 секунду Сообщение от Qwerty_Wasd diadiavova, здравствуй 1

@Eclectoi 0 / 0 / 0 Регистрация: 06.12.2019 Сообщений: 83
	23.01.2020, 05:16 [ТС]	6
	Сообщение от diadiavova двигать что-то мышкой Надо сделать чтобы по клике на кнопку создавалась привязанная такая же кнопка, и уже вторую кнопку можно двигать. Не пойму как сделать, хоть убейте 0

@Eclectoi 0 / 0 / 0 Регистрация: 06.12.2019 Сообщений: 83
	23.01.2020, 20:01 [ТС]	8
	Сообщение от diadiavova это уже дело техники. на самом деле выглядит очень complicated, но, с кучей материала, думаю, разберусь. Спасибо вам! 0

@Eclectoi 0 / 0 / 0 Регистрация: 06.12.2019 Сообщений: 83
	24.01.2020, 06:01 [ТС]	10
	Сообщение от diadiavova </html> что то ничего не передвигается 0

@Eclectoi 0 / 0 / 0 Регистрация: 06.12.2019 Сообщений: 83
	28.01.2020, 19:46 [ТС]	14
	Сообщение от diadiavova Наверно добавлять группу лучше как-то так а куда этот код добавлять, или вместо чего? 0

@Eclectoi 0 / 0 / 0 Регистрация: 06.12.2019 Сообщений: 83
	29.01.2020, 21:10 [ТС]	16
	Сообщение от diadiavova Я там добавил комментарии в тех местах, где надо двигать линию. ага, увидел, спасибо. Двигать линию как? придется изучить dom и svg... 0

@diadiavova 6219 / 2467 / 725 Регистрация: 11.04.2015 Сообщений: 3,987 Записей в блоге: 43
	29.01.2020, 21:17	17
	Сообщение от Eclectoi Двигать линию как? Дык это как раз проще пареной репы. У нее есть атрибуты x1, x2, y1 и y2. С их помощью устанавливаются начало и конец линии. Естественно надо просчитать это все, в зависимости от расположения самих кнопок. Да, и насчет групп еще, пожалуй, добавлю кое что. Если кнопки могут быть сгруппированы вот только так как показано (по две за раз), то группа вполне подойдет для того, чтобы с ее помощью определять какие кнопки связаны. Но если связей будет больше, то при таком подходе потребуется один объект сразу в несколько групп размещать, а это, как ты понимаешь, невозможно. Так что для этих целей может группа и не самый удачный выбор. Ну это так, к слову. 1

В каком направлении копать, чтобы сделать это?

Решение