javascript - 字母环绕一个圆圈

Question

我试图将字母环绕在 4 个 div 的圆形边框周围。我已经想出“如何”来实现这一点，但我对如何定位我的字母以逆时针方向和从上到下换行还不够了解。下面是我的片段。我希望字母的顶部位于底部两个 div 的内边框上，字母的底部位于顶部两个 div 的内边框顶部>s。

// begin jQuery -- 
$(document).ready(function($) {
  var audio = new Audio('http://soundbible.com/grab.php?id=1377&type=mp3');

  function beep() {

    audio.play();
  }

  var c = 0;
  var resumeT = 0;
  var t;
  var timer_is_on = 0;
  $('#resume').hide();
  var pomodoros = 0;
  // Convert given number to readable format
  var SecondsTohhmmss = function(totalSeconds) {
    var hours = Math.floor(totalSeconds / 3600);
    var minutes = Math.floor((totalSeconds - (hours * 3600)) / 60);
    var seconds = totalSeconds - (hours * 3600) - (minutes * 60);

    // round seconds
    seconds = Math.round(seconds * 100) / 100

    var result = (hours < 10 ? "0" + hours : hours);
    result += ":" + (minutes < 10 ? "0" + minutes : minutes);
    result += ":" + (seconds < 10 ? "0" + seconds : seconds);
    return result;
  }

  // timer functions
  function timedCount(c) {
    $('#quart').off('mouseenter mouseleave');
    if (c === 0) {
      $('#time').val('Great Job!')
      beep();
      clearTimeout(t);
      alert('Now go for a short, brisk walk you over-achiever!')
      pomodoros++;
      $('#pomodoros').val(pomodoros);
    } else {
      var totalSeconds = c--;
      resumeT = totalSeconds;
      //console.log(resumeT);
      var results = SecondsTohhmmss(totalSeconds);
      $('#time').val(results);
      $('.center').val(results);
      t = setTimeout(function() {
        timedCount(c)
      }, 1000);
    }
  }

  function resetCount() {
    c = 0;
    resumeT = 0;
    timer_is_on = 0;
    if (!timer_is_on) {
      // console.log(c);
      timer_is_on = 1;
      var check = $('#timeInt').val();
      console.log(check);
      if (check === '') {
        c = 25 * 60;
      } else c = check * 60;
      // below commented gives option to set their own time default is 25.
      //c = $('#timeInt').val()
      timedCount(c);
    }
  }

  function startCount() {
    $('#one').removeClass("quart:hover");
    if (!timer_is_on) {
      // console.log(c);
      timer_is_on = 1;
      var check = $('#timeInt').val();
      console.log(check);
      if (check === '') {
        c = 25 * 60;
      } else c = check * 60;
      // below commented gives option to set their own time default is 25.
      //c = $('#timeInt').val()
      timedCount(c);
    }
  }

  function resumeCount() {
    $('#resume').hide();
    $('#pause').show();
    timer_is_on = 0;
    console.log(resumeT);
    //c = resumeT;
    //timedCount(c);
    t = setTimeout(function() {
      timedCount(resumeT)
    }, 1000);

  }

  function stopCount() {
    // Toggle text on Pause/ Resume
    $('#pause').hide();
    $('#resume').show();
    clearTimeout(t);
    timer_is_on = 0;
  }
  // Button Control
  $('#one').click(startCount);
  $('#four').click(resumeCount);
  $('#two').click(stopCount);
  $('#three').click(resetCount);
});

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800);
#controls {
  width: 50%;
  display: table;
  margin: 0 auto;
}

#mainTitle {
  display: table!important;
  margin: 0 auto!important;
}

h1 span {
  font: 26px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  width: 20px;
  left: 55%;
  top: 1%;
  display: table;
  margin: 0 auto;
  transform-origin: bottom center;
}

.char1 {
  transform: rotate(6deg);
}

.char2 {
  transform: rotate(12deg);
}

.char3 {
  transform: rotate(18deg);
}

.char4 {
  transform: rotate(24deg);
}

.char5 {
  transform: rotate(30deg);
}

.char6 {
  transform: rotate(36deg);
}

.char7 {
  transform: rotate(42deg);
}

.char8 {
  transform: rotate(48deg);
}

.char9 {
  transform: rotate(54deg);
}

.char10 {
  transform: rotate(60deg);
}

.char11 {
  transform: rotate(66deg);
}

.char12 {
  transform: rotate(72deg);
}

#one span {
  font: 26px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  width: 20%;
  right: 30%;
  top: 20%;
  transform-origin: 35% 46%;
}

.char13 {
  transform: rotate(-60deg);
}

.char14 {
  transform: rotate(-50deg);
}

.char15 {
  transform: rotate(-40deg);
}

.char16 {
  transform: rotate(-30deg);
}

.char17 {
  transform: rotate(-20deg);
}

#two span {
  font: 26px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  width: 20%;
  left: 30%;
  top: 12%;
  display: table;
  margin: 0 auto;
  transform-origin: 3% 46%;
}

.char18 {
  transform: rotate(5deg);
}

.char19 {
  transform: rotate(18deg);
}

.char20 {
  transform: rotate(31deg);
}

.char21 {
  transform: rotate(43deg);
}

.char22 {
  transform: rotate(56deg);
}

#three span {
  font: 26px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  width: 20%;
  left: 0;
  top: 0;
  display: table;
  margin: 0 auto;
  transform-origin: 560% -20%;
}

.char23 {
  transform: rotate(310deg);
}

.char24 {
  transform: rotate(315deg);
}

.char25 {
  transform: rotate(320deg);
}

.char26 {
  transform: rotate(325deg);
}

.char27 {
  transform: rotate(330deg);
}

#four span {
  font: 26px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  width: 20px;
  right: 0;
  bottom: 10%;
  display: table;
  margin: 0 auto;
  transform-origin: -2000% -90%;
}

.char28 {
  transform: rotate(5deg);
}

.char29 {
  transform: rotate(10deg);
}

.char30 {
  transform: rotate(15deg);
}

.char31 {
  transform: rotate(20deg);
}

.char32 {
  transform: rotate(25deg);
}

.char33 {
  transform: rotate(30deg);
}

#play {
  float: right;
  width: 22%;
}

#pause {
  width: 21%;
  -ms-transform: rotate(1deg);
  /* IE 9 */
  -webkit-transform: rotate(1deg);
  /* Chrome, Safari, Opera */
  transform: rotate(1deg);
  position: absolute!important;
}

#pomodoros {
  width: 50%;
  display: table;
  marign: 0 auto;
}

#time {
  display: table;
  margin: 0 auto;
  height: 300px;
  width 200px;
  border-radius: 50%;
  border: solid;
  text-align: center;
  margin-top: 2%;
  font-size: 30px;
}

button,
input {
  display: table;
  margin: 0 auto;
}

#pomodoros {
  border-radius: 50%;
  width: 30px;
  margin-right: 5%;
  ;
  text-align: center;
  color: white;
  font-weight: 400;
  background-color: black;
}

#clock {
  width: 500px;
  height: 500px;
  border-radius: 50%;
  border: solid;
  margin-top: 20px;
}

#outer {
  width: 550px;
  height: 550px;
  border-radius: 50%;
  border: solid;
}

label {
  display: inline-block;
  width: 5em;
}

.wrap {
  height: 500px;
  width: 500px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 5%;
  cursor: pointer;
}

.quart {
  position: absolute;
  height: 50%;
  width: 50%;
  background: tomato;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.quart:first-child {
  top: 0;
  left: 0;
}

.quart:nth-child(2) {
  top: 0;
  left: 50%;
}

.quart:nth-child(3) {
  top: 50%;
  left: 0;
}

.quart:nth-child(4) {
  top: 50%;
  left: 50%;
}

.quart:nth-child(4):hover {
  content: 'text';
}

#keepCount {
  border-radius: 50%;
  width: 25px;
  height: 25px;
  position: absolute;
  background-color: yellow;
}

.center {
  height: 80%;
  width: 80%;
  position: absolute;
  top: 10%;
  left: 10%;
  background-color: dimgray;
  border-radius: 50%;
  text-align: center;
  line-height: 160px;
}

.quart:hover {
  transform: scale(1.2);
  background-color: yellow;
  color: black;
}

#timeInt {
  z-index: 1px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--<div id="outer" class="container-fluid wrap">
<div id="clock" class="container-fluid">
  <input id="time" type="text" disabled></input>
  <div class="container-fluid">
  <div id="controls">
 <div class="resetTime">
<button id="reset">Reset</button>
   <button id="pause">Pause</button><button id="resume">Resume</button>
</div>
       <input id="pomodoros"></input>
    </div>
<div class="adjust">
  <input id="timeInt" type="text" enabled placeholder="       Enter time in mins."><button id="start">Start</button></input>
  </div>
  </div>
</div>
</div>


<img id="play" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/591470/1466634277_Play1Disabled.png'></img>
<img id="pause" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/591470/1466634288_PauseDisabled.png'>
-->
<h1 id="mainTitle">
  <span class="char1">Y</span>
  <span class="char2">o</span>
  <span class="char3">u</span>
  <span class="char4">r</span>
  <span class="char4"> </span>
  <span class="char5"> P</span>
  <span class="char6">o</span>
  <span class="char7">m</span>
  <span class="char8">o</span>
  <span class="char9">d</span>
  <span class="char10">o</span>
  <span class="char11">r</span>
  <span class="char12">o</span> 
</h1>
<div class="wrap">
  <div id="one" class="quart" title="Start your Pomodoro">
    <span class="char13">S</span>
    <span class="char14">t</span>
    <span class="char15">a</span>
    <span class="char16">r</span>
    <span class="char17">t</span>
  </div>
  <div id="two" class="quart" title="Pause Pomodoro">
    </img>
    <span class="char18">P</span>
    <span class="char19">a</span>
    <span class="char20">u</span>
    <span class="char21">s</span>
    <span class="char22">e</span>
  </div>
  <div id="three" class="quart" title="Reset Pomodoro">
    <span class="char23">t</span>
    <span class="char24">e</span>
    <span class="char25">s</span>
    <span class="char26">e</span>
    <span class="char27">R</span>
  </div>
  <div id="four" class="quart" title="Resume Pomodoro">

    <span class="char28">e</span>
    <span class="char29">m</span>
    <span class="char30">u</span>
    <span class="char31">s</span>
    <span class="char32">e</span>
    <span class="char33">R</span>
  </div>
  <input id="timeInt" type="text"></input>
  <h1><input class="center" disabled>
      <div id="countPomos"><input id="keepCount"></input></div>
<!--
Working CSS for 'REsume'

#four span{
  font: 26px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  width: 20px;
  right: 0;
  top: 10%;
  display: table;
  margin: 0 auto;
  transform-origin: -1000% -9%; ;
}
.char28 { transform: rotate(90deg); }
.char29 { transform: rotate(95deg); }
.char30 { transform: rotate(20deg); }
.char31 { transform: rotate(25deg); }
.char32 { transform: rotate(30deg); }
.char33 { transform: rotate(35deg); }


-->
    
    
    
    </input></h1>
</div>

Answer 1

根据评论，我提供了一些可以摆弄的东西 here

HTML

<h1 class="circular circular-top"
  style="left: 0; top:100px; transform: rotate(-60deg)">Testing circular text</h1>
<h1 class="circular circular-bottom" 
  style="position: absolute;top: 100px;left:175px;transform: rotate(70deg)">
  Testing circular text
</h1>

JavaScript

$(function() {
    $(".circular").each(function(index, el){ 
    var $el = $(el);
    $el.html($el.text().replace(/(.{1})/g, '<span>$1</span>'));
    $el.find("span").each(function(index2, el2) {
        $(el2).css("transform", "rotate(" + ($el.hasClass("circular-top") ? 6 : -6) * index2 + "deg)");
    });
  });
});

CSS

.circular {
  font: 26px Monaco, MonoSpace;
  position: absolute;
}

.circular span {
  position: absolute;
  width: 20px;
  left: 0;
  top: 0;
}

.circular-top span {
  height: 200px;
  transform-origin: bottom center;
}

.circular-bottom span {
  padding-top: 180px;
  transform-origin: top center;
}

并修改了“真实”代码here