Как сделать что бы при двойном нажатии круг разделялся на 4 части и чтобы они подсвечивались как в видео по ссылке

Question

Здравствуйте мне нужно сделать так чтобы при двойном щелчке круг разделялся на 4 части, и подсвечивался каждый по отдельности как в видео. Как же это сделать?

Дайте хотя бы ссылки на то как это примерно реализовать.

По этой ссылке вы сможете просмотреть видео с готовым результатом

let dragMode = false;
circle.addEventListener('mousedown', function (e) {
    dragMode = true;
});
circle.addEventListener('mouseup', function (e) {
    dragMode = false;
});
document.addEventListener('mousemove', function (e) {
    if (dragMode) {
        circle.style.left = e.clientX - 50 + 'px';
        circle.style.top = e.clientY - 50 + 'px';
    }
});

body{
    background-color: #333;
}
.container{
    max-width: 1440px;
    max-height: 900px;
    margin: 0 auto;
}
.circle {
    position: absolute;
    
    
	width: 100px;
	height: 100px;
	background: red;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}

<!DOCTYPE HTML>
<html lang="ru">

<head>
    <title>Redactor marshrutov</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="menu1.css">
</head>

<body>
    <section class="section">
        <div class="container">
            <div class="circle" id="circle">
            </div>
        </div>
        <div class="dbclick">
              
        </div>
    </section>
    <script type="text/javascript" src="menu1.js">
    </script>
</body>

</html>

Answer 1

Наверное можно сделать нечто такое:

let svg = document.querySelector("svg")
let bg = document.querySelector("svg rect")

function click(e) {
  svg.innerHTML += `
    <g transform="translate(${e.clientX},${e.clientY})">
      <circle onclick="split(this)" r="50"></circle>
    </g>
  `;
}

function split(el){
  el.parentNode.innerHTML = [...Array(4)].map((_,i) => `
    <path d="M-50,0A50,50,0,0,0,0,50L0,0z" 
          onclick=merge(this) 
          transform="rotate(${-45+i*90})"></path>
  `);
}

function merge(el){
  el.parentNode.innerHTML =  `<circle onclick="split(this)" r="50"></circle>`;
}

function resize() {
  svg.setAttribute("viewBox", [0, 0, innerWidth, innerHeight]);
}

resize();
addEventListener("resize", resize);

body {
  margin: 0;
  overflow: hidden
}

path, circle {
  transition: 100ms;
  fill: #0001;
  stroke: black;
}

path:hover, circle:hover {
  fill: #0002;
}

<svg>
  <rect fill="white" width="5555" height="5555" onclick="click(event)"></rect>
</svg>

БЛОГ НА HUSL

Как сделать что бы при двойном нажатии круг разделялся на 4 части и чтобы они подсвечивались как в видео по ссылке

Ответы (1 шт):