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

romanlol · February 11, 2020

Я сделал вот это - внизу скрин. Надо сделать то, что под 8 и 9 номером. Как это сделать? уже неделю ищу - не могу ничего найти.

Скрытый текст


<!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>
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);
            }
        }
        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>

Edited February 13, 2020 by klierik
форматирование кода

Sign In

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

Question

romanlol

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information