javascript - 如何使文本以逆时针方向流动javascript代码

Question

我需要帮助的只是让圆圈底部的年份在我更改原点 = 225 后逆时针（逆时针）流动。小提琴在下面。其他一切工作正常。我确定这是一段简单的代码，但我就是找不到它的去向。感谢您的任何帮助，您可以提供。

https://jsfiddle.net/sleepy155/9s3uyr8c/8/

circularTextTopArc(" N Y  M  e t s ", 57, 0);
circularTextTopArc(" L A  D o d g e r s ", 57, 1);
circularTextTopArc(" S F  G  i a n t s ", 57, 2);
circularTextTopArc(" N Y  Y a n k e e s ", 57, 3);
circularTextTopArc(" N Y  Y a n k e e s ", 57, 4);


function circularTextTopArc(txt, radius, classIndex) {
  txt = txt.split(""),
    classIndex = document.getElementsByClassName("circTxt")[classIndex];

  var deg = 120 / txt.length,
    origin = 300;

  txt.forEach((ea) => {
    ea = `<p style='height:${radius}px;position:absolute;z-index:99;
                        transform:rotate(${origin}deg);transform-origin:0 100%'>${ea}</p>`;
    classIndex.innerHTML += ea;
    origin += deg;
  });
}

circularTextBottomArc(" 1983 - 1990 ", 54, 0, );
circularTextBottomArc(" 1991 - 1993 ", 54, 1);
circularTextBottomArc("  1994  ", 54, 2);
circularTextBottomArc("  1995  ", 54, 3);
circularTextBottomArc(" 1996 - 1999 ", 54, 4);

function circularTextBottomArc(txt, radius, classIndex) {
  txt = txt.split(""),
    classIndex = document.getElementsByClassName("circTxt")[classIndex];

  var deg = 90 / txt.length,
    origin = 135;

  txt.forEach((ea) => {
    ea = `<p style='height:${radius}px;position:absolute;z-index:99;
                        transform:rotate(${origin}deg);transform-origin:0 100%'>${ea}</p>`;
    classIndex.innerHTML += ea;
    origin += deg;

  });
}

#header {
  display: flex;
  justify-content: space-around;
  padding: 5px;
  height: 100px;
}

#circles {
  width: 80px;
  height: 80px;
  transform: translateY(25px);
  text-align: center;
  cursor: pointer;
}

.circTxt {
  transform: translateX(40px);
  z-index: 99;
  font-size: 12px;
  font-weight: 500;
}

        <div id="header">

    <div class="container" title="NY Mets 1983-1990">
        <div class="circTxt" id="test"></div>
    
            <svg viewBox="0,0,50,50" id="circles">
            <circle cx="25" cy="25" r="23" fill="white"></circle>
        <line x1="6" y1="12" x2="6" y2="39" stroke="#002C74"></line> 
        <line x1="13" y1="4" x2="13" y2="46" stroke="#002C74"></line> 
        <line x1="21" y1="2" x2="21" y2="48" stroke="#002C74"></line>       <line x1="28" y1="2" x2="28" y2="48" stroke="#002C74"></line>
        <line x1="36" y1="4" x2="36" y2="46" stroke="#002C74"></line> 
        <circle cx="25" cy="25" r="23" stroke="#002C74" stroke-width="4" fill="#fff" fill-opacity="0.0"></circle> 
            <circle cx="25" cy="25" r="20" stroke="#FF4A00" stroke-width="3" fill="#fff" fill-opacity="0.0"></circle> 
            <text x="15" y="30" fill="#002C74">18</text> </svg>
        
    </div>

    <div class="container" title="LA Dodgers 1991-1993">
        <div class="circTxt" id="test"></div>

        <svg viewBox="0,0,50,50" id="circles"> 
        <circle cx="25" cy="25" r="23" fill="white"></circle>  
        <circle cx="25" cy="25" r="23" stroke="#005A9C" stroke-width="4" fill="#fff" fill-opacity="0.0"></circle> 
        <circle cx="25" cy="25" r="20" stroke="#E71D35" stroke-width="3" fill="#fff" fill-opacity="0.0"></circle> 
        <text x="17" y="30" fill="#005A9C">44</text> </svg>
    
    </div>

    <div class="container" title="SF Giants 1994">
        <div class="circTxt" id="test"></div>

        <svg viewBox="0,0,50,50" id="circles"> 
        <circle cx="25" cy="25" r="23" fill="white"></circle>  
        <circle cx="25" cy="25" r="23" stroke="#000000" stroke-width="4" fill="#fff" fill-opacity="0.0"></circle> 
        <circle cx="25" cy="25" r="20" stroke="#FD5A1E" stroke-width="3" fill="#fff" fill-opacity="0.0"></circle> 
        <text x="17" y="30" fill="#000000">17</text> </svg>

    </div>

    <div class="container" title="NY Yankees 1995">
        <div class="circTxt" id="test"></div>
        
        <svg viewBox="0,0,50,50" id="circles"> 
        <circle cx="25" cy="25" r="23" fill="white"></circle>
        <line x1="6" y1="12" x2="6" y2="39" stroke="#003087"></line> 
        <line x1="13" y1="4" x2="13" y2="46" stroke="#003087"></line> 
        <line x1="21" y1="2" x2="21" y2="48" stroke="#003087"></line> 
        <line x1="28" y1="2" x2="28" y2="48" stroke="#003087"></line>
        <line x1="36" y1="4" x2="36" y2="46" stroke="#003087"></line> 
    <line x1="43" y1="12" x2="43" y2="39" stroke="#003087"></line>  
        <circle cx="25" cy="25" r="23" stroke="#003087" stroke-width="4" fill="#fff" fill-opacity="0.0"></circle> 
        <circle cx="25" cy="25" r="20" stroke="#E8002F" stroke-width="3" fill="#fff" fill-opacity="0.0"></circle> 
        <text x="17" y="30" fill="#003087">26</text> </svg>
    
    </div>
    
    <div class="container" title="NY Yankees 1996-1999">
        <div class="circTxt" id="test"></div>

        <svg viewBox="0,0,50,50" id="circles"> 
        <circle cx="25" cy="25" r="23" fill="white"></circle>
        <line x1="6" y1="12" x2="6" y2="39" stroke="#003087"></line> 
        <line x1="13" y1="4" x2="13" y2="46" stroke="#003087"></line> 
    <line x1="21" y1="2" x2="21" y2="48" stroke="#003087"></line> 
    <line x1="28" y1="2" x2="28" y2="48" stroke="#003087"></line>
    <line x1="36" y1="4" x2="36" y2="46" stroke="#003087"></line> 
    <line x1="43" y1="12" x2="43" y2="39" stroke="#003087"></line>  
    <circle cx="25" cy="25" r="23" stroke="#003087" stroke-width="4" fill="#fff" fill-opacity="0.0"></circle> 
        <circle cx="25" cy="25" r="20" stroke="#E8002F" stroke-width="3" fill="#fff" fill-opacity="0.0"></circle> 
        <text x="17" y="30" fill="#003087">39</text> </svg>

    </div>

</div>

标签： javascript

Answer 1

更清洁的方法：

 var deg = 90 / txt.length,
    origin = 325;

  txt.forEach((ea) => {
    ea = `<p style='height:${radius}px;position:absolute;z-index:99;
                        transform:rotate(${origin}deg)translateY(95px);transform-origin:0 100%'>${ea}</p>`;
    classIndex.innerHTML += ea;
    origin += deg;