旋转时如何使圆圈周围的文本不重叠

Question

我想在圆周围创建菜单。我有一个问题，当我将圆圈旋转到顶部时，元素重叠。向下旋转时，元素之间的空间超出了需要。 那么，在旋转时如何定位元素以使它们彼此之间的距离相等？

这是我的代码：

HTML

<div class="wr">
  <ul class="menu-list">
    <li>
      <a href="#">Some Long Text TExt text</a>
    </li>
    <li>
      <a href="#">Some Long Text TExt text</a>
    </li>
    <li>
      <a href="#">Some Long Text TExt text</a>
    </li>
    <li>
      <a href="#">Some Long Text TExt text</a>
    </li>
    <li>
      <a href="#">Some Long Text TExt text</a>
    </li>
    <li>
      <a href="#">Some Long Text TExt text</a>
    </li>
    <li>
      <a href="#">Some Long Text TExt text</a>
    </li>
    <li>
      <a href="#">Some Long Text TExt text</a>
    </li>
  </ul>
</div>

SCSS

   .wr {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.menu-list {
    width: 1200px;
    height: 1200px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
  left: -764px;
  top: 241px;
  li {
    position: absolute;
    list-style: none;
    top: 50%;
    left: 50%;
    height: 0;
    width: 0;
    a {
        display: inline-block;
    margin-top: -20px;

            font-size: 24px;
            font-weight: bold;
            font-family: 'Noto Serif', serif;
            color: #2a314f;
            text-decoration: none;
            transition: all 0.3s ease;
            height: 41px;
            line-height: 41px;
            white-space: nowrap;
    }
  }
}

JavaScript

  function sel(a) {
  return document.querySelector(a);
}

function selAll(a) {
  return document.querySelectorAll(a);
}

var rotateLi = -68;
var arrca = [];

// Position all elements around circle
selAll('.menu-list li').forEach(function(item, i, arr){
  item.style.transform = 'rotate(' + rotateLi + 'deg) translate(670px) rotate(' + -rotateLi + 'deg)';
   rotateLi += 8.8
});

var radialRotateRadius = window.innerHeight / 90;

function detectRightClick(e) {
  e = e || window.event;
  if ("which" in e)  
    isRightMB = e.which == 3; 
  else if ("button" in e)  
    isRightMB = e.button == 2; 

  return isRightMB
}

// Old UL rotation DEG
var oldRotationRadius = 0;

sel('.wr').addEventListener('mousedown', function(e){

  if ( detectRightClick(e) ) {
    return;
  } else {

    e.preventDefault();
    var clickPosition = e.clientY
    var allLi = selAll('.menu-list li');
    arrca = [];

    // Collect new item rotation
    selAll('.menu-list li').forEach(function(item, i, arr){
      var indexOfRotate = item.style.transform.indexOf('rotate', 2);
      var indexOfDeg = item.style.transform.indexOf('deg', indexOfRotate);
      var currentRotationDeg = item.style.transform.slice( indexOfRotate + 7, indexOfDeg );
      arrca.push(-currentRotationDeg);
    })

    document.onmousemove = function(e) {

      var movePosition = e.clientY
      var currentPosition = clickPosition - movePosition;
      var rotationRadius = currentPosition / radialRotateRadius;

      if ( oldRotationRadius ) {
        var rad = -(+rotationRadius.toFixed(8)) + +(+oldRotationRadius).toFixed(8)
        } else {
          var rad = -(+rotationRadius.toFixed(8)) + parseInt(oldRotationRadius);
        }

      if ( 0 > currentPosition ) {
        //Down 
        sel('.menu-list').style.transform = 'rotate(' + rad +'deg)';

        for (var i = 0; i < allLi.length; i++) {

        var indexOfRotate1 = allLi[i].style.transform.indexOf('rotate');
        var indexOfDeg1 = allLi[i].style.transform.indexOf('deg', indexOfRotate1);
        var currentRotationDeg1 = allLi[i].style.transform.slice( indexOfRotate1 + 7, indexOfDeg1 );
        var a = currentRotationDeg1;
        var b = -arrca[i] + rotationRadius;


        allLi[i].style.transform = 'rotate(' + a + 'deg) translate(670px) rotate(' + b  + 'deg)'
        }

      } else if ( 0 < currentPosition ) {
        //UP 
        sel('.menu-list').style.transform = 'rotate(' + rad +'deg)'

        for (var i = 0; i < allLi.length; i++) {

          var indexOfRotate1 = allLi[i].style.transform.indexOf('rotate');
          var indexOfDeg1 = allLi[i].style.transform.indexOf('deg', indexOfRotate1);
          var currentRotationDeg1 = allLi[i].style.transform.slice( indexOfRotate1 + 7, indexOfDeg1 );

          var a = currentRotationDeg1;
          var b = -arrca[i] + rotationRadius;
          allLi[i].style.transform = 'rotate(' + a + 'deg) translate(670px) rotate(' + b  + 'deg)'

        }
      }
    }

    document.onmouseup = function(e) {
    document.onmousemove = null;

      if ( clickPosition == e.clientY ) {
        return;
      } else {
        var indexOfRotate = sel('.menu-list').style.transform.indexOf('rotate');
        var indexOfDeg = sel('.menu-list').style.transform.indexOf('deg', indexOfRotate);
        var currentRotationDeg = sel('.menu-list').style.transform.slice( indexOfRotate + 7, indexOfDeg );

        oldRotationRadius = currentRotationDeg
      }
    }

  }; //end detect right click

});

https://jsfiddle.net/olegslyvka/eoLh10rg/

Answer 1

我建议您从JavaScript中删除具有正值的rotate。这样也会旋转文本。如果需要类似this (jsfiddle)的东西。

function sel(a) {
  return document.querySelector(a);
}

function selAll(a) {
  return document.querySelectorAll(a);
}

var rotateLi = -68;
var arrca = [];

// Position all elements around circle
selAll('.menu-list li').forEach(function(item, i, arr){
  item.style.transform = 'rotate(' + rotateLi + 'deg) translate(670px) ';
   rotateLi += 8.8
});

var radialRotateRadius = window.innerHeight / 90;

function detectRightClick(e) {
  e = e || window.event;
  if ("which" in e)  
    isRightMB = e.which == 3; 
  else if ("button" in e)  
    isRightMB = e.button == 2; 

  return isRightMB
}

// Old UL rotation DEG
var oldRotationRadius = 0;

sel('.wr').addEventListener('mousedown', function(e){

  if ( detectRightClick(e) ) {
    return;
  } else {

    e.preventDefault();
    var clickPosition = e.clientY
    var allLi = selAll('.menu-list li');
    arrca = [];

    // Collect new item rotation
    selAll('.menu-list li').forEach(function(item, i, arr){
      var indexOfRotate = item.style.transform.indexOf('rotate', 2);
      var indexOfDeg = item.style.transform.indexOf('deg', indexOfRotate);
      var currentRotationDeg = item.style.transform.slice( indexOfRotate + 7, indexOfDeg );
      arrca.push(-currentRotationDeg);
    })
    
    document.onmousemove = function(e) {

      var movePosition = e.clientY
      var currentPosition = clickPosition - movePosition;
      var rotationRadius = currentPosition / radialRotateRadius;

      if ( oldRotationRadius ) {
        var rad = -(+rotationRadius.toFixed(8)) + +(+oldRotationRadius).toFixed(8)
        } else {
          var rad = -(+rotationRadius.toFixed(8)) + parseInt(oldRotationRadius);
        }

      if ( 0 > currentPosition ) {
        //Down 
        sel('.menu-list').style.transform = 'rotate(' + rad +'deg)';

        for (var i = 0; i < allLi.length; i++) {

        var indexOfRotate1 = allLi[i].style.transform.indexOf('rotate');
        var indexOfDeg1 = allLi[i].style.transform.indexOf('deg', indexOfRotate1);
        var currentRotationDeg1 = allLi[i].style.transform.slice( indexOfRotate1 + 7, indexOfDeg1 );
        var a = currentRotationDeg1;
        var b = -arrca[i] + rotationRadius;


        allLi[i].style.transform = 'rotate(' + a + 'deg) translate(670px)'
        }

      } else if ( 0 < currentPosition ) {
        //UP 
        sel('.menu-list').style.transform = 'rotate(' + rad +'deg)'

        for (var i = 0; i < allLi.length; i++) {

          var indexOfRotate1 = allLi[i].style.transform.indexOf('rotate');
          var indexOfDeg1 = allLi[i].style.transform.indexOf('deg', indexOfRotate1);
          var currentRotationDeg1 = allLi[i].style.transform.slice( indexOfRotate1 + 7, indexOfDeg1 );

          var a = currentRotationDeg1;
          var b = -arrca[i] + rotationRadius;
          allLi[i].style.transform = 'rotate(' + a + 'deg) translate(670px)'

        }
      }
    }

    document.onmouseup = function(e) {
    document.onmousemove = null;

      if ( clickPosition == e.clientY ) {
        return;
      } else {
        var indexOfRotate = sel('.menu-list').style.transform.indexOf('rotate');
        var indexOfDeg = sel('.menu-list').style.transform.indexOf('deg', indexOfRotate);
        var currentRotationDeg = sel('.menu-list').style.transform.slice( indexOfRotate + 7, indexOfDeg );

        oldRotationRadius = currentRotationDeg
      }
    }

  }; //end detect right click

});

.wr {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.menu-list {
	width: 1200px;
	height: 1200px;
	background-color: red;
	border-radius: 50%;
	position: absolute;
  left: -764px;
  top: 241px;
  
 }
 
 .menu-list > li {
  	position: absolute;
  	list-style: none;
  	top: 50%;
  	left: 50%;
  	height: 0;
  	width: 0;
}
.menu-list > li > a {
  		display: inline-block;
    margin-top: -20px;

			font-size: 24px;
			font-weight: bold;
			font-family: 'Noto Serif', serif;
			color: #2a314f;
			text-decoration: none;
			transition: all 0.3s ease;
			height: 41px;
			line-height: 41px;
			white-space: nowrap;
  	}

<div class="wr">
  <ul class="menu-list">
    <li>
      <a href="#">Some Long Text TExt text</a>
    </li>
    <li>
      <a href="#">Some Long Text TExt text</a>
    </li>
    <li>
      <a href="#">Some Long Text TExt text</a>
    </li>
    <li>
      <a href="#">Some Long Text TExt text</a>
    </li>
    <li>
      <a href="#">Some Long Text TExt text</a>
    </li>
    <li>
      <a href="#">Some Long Text TExt text</a>
    </li>
    <li>
      <a href="#">Some Long Text TExt text</a>
    </li>
    <li>
      <a href="#">Some Long Text TExt text</a>
    </li>
  </ul>
</div>