Блог

Главная - Вопросы по программированию - Сегментированный круг с динамическим текстом внутри перемещаемых сегментов

Сегментированный круг с динамическим текстом внутри перемещаемых сегментов

#javascript #html #css #svg #canvas

#javascript #HTML #css #svg #холст

Вопрос:

Я пытаюсь создать сегментированную круговую диаграмму с границами, тенями на сегментах и динамическими текстовыми базовыми линиями, которые следуют за радиусом сегмента.

Я пытался создать это с помощью html и css , но мне не очень повезло. Может svg быть или canvas может быть лучшим решением, но не уверен, как подойти к этому.

Вот что я пытался использовать html и css …

 body {
  background: black;
}

.circle {
  width: 500px;
  height: 500px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}

.circle__center {
  position: absolute;
  top: calc(50% - 2px);
  left: calc(50% - 2px);
  z-index: 1000;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: black;
}

.layer1 {
  width: 100%;
  height: 100%;
  position: relative;
}

.layer2 {
  background: black;
  height: 375px;
  width: 375px;
  position: absolute;
  z-index: 200;
  border-radius: 50%;
  top: calc(50% - 187.5px);
  left: calc(50% - 187.5px);
}

.layer2__wrapper {
  height: 370px;
  width: 370px;
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  top: calc(50% - 185px);
  left: calc(50% - 185px);
}

.layer3 {
  background: black;
  height: 250px;
  width: 250px;
  position: absolute;
  z-index: 300;
  border-radius: 50%;
  top: calc(50% - 125px);
  left: calc(50% - 125px);
}

.layer3__wrapper {
  height: 245px;
  width: 245px;
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  top: calc(50% - 122.5px);
  left: calc(50% - 122.5px);
}

.layer4 {
  background: black;
  height: 125px;
  width: 125px;
  position: absolute;
  z-index: 400;
  border-radius: 50%;
  top: calc(50% - 62.5px);
  left: calc(50% - 62.5px);
}

.layer4__wrapper {
  height: 120px;
  width: 120px;
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  top: calc(50% - 60px);
  left: calc(50% - 60px);
}

.item {
  width: 100%;
  height: 100%;
  transform-origin: bottom right;
  position: absolute;
  background: gray;
  bottom: 50%;
  right: 50%;
}

.item:hover {
  background: purple;
  cursor: pointer;
}

.item:nth-child(1) {
  transform: skew(38.57142857deg, 6.428571429deg);
}

.item:nth-child(2) {
  transform: skew(-12.8571428deg, 57.85714286deg);
}

.item:nth-child(3) {
  transform: rotate(90deg) skew(25.71428571deg, 19.28571429deg);
}

.item:nth-child(4) {
  transform: rotate(180deg) skew(64.28571429deg, -19.28571429deg);
}

.item:nth-child(5) {
  transform: rotate(180deg) skew(12.85714286deg, 32.14285714deg);
}

.item:nth-child(6) {
  transform: rotate(270deg) skew(51.42857143deg, -6.428571429deg);
}

.item:nth-child(7) {
  transform: rotate(270deg) skew(0, 45deg);
}  
 <div class="circle">
  <div class="layer1">
    <div class="layer1__item item"></div>
    <div class="layer1__item item"></div>
    <div class="layer1__item item"></div>
    <div class="layer1__item item"></div>
    <div class="layer1__item item"></div>
    <div class="layer1__item item"></div>
    <div class="layer1__item item"></div>
  </div>
  <div class="layer2">
    <div class="layer2__wrapper">
      <div class="layer2__item item"></div>
      <div class="layer2__item item"></div>
      <div class="layer2__item item"></div>
      <div class="layer2__item item"></div>
      <div class="layer2__item item"></div>
      <div class="layer2__item item"></div>
      <div class="layer2__item item"></div>
    </div>
  </div>
  <div class="layer3">
    <div class="layer3__wrapper">
      <div class="layer3__item item"></div>
      <div class="layer3__item item"></div>
      <div class="layer3__item item"></div>
      <div class="layer3__item item"></div>
      <div class="layer3__item item"></div>
      <div class="layer3__item item"></div>
      <div class="layer3__item item"></div>
    </div>
  </div>
  <div class="layer4">
    <div class="layer4__wrapper">
      <div class="layer4__item item"></div>
      <div class="layer4__item item"></div>
      <div class="layer4__item item"></div>
      <div class="layer4__item item"></div>
      <div class="layer4__item item"></div>
      <div class="layer4__item item"></div>
      <div class="layer4__item item"></div>
    </div>
  </div>
  <div class="circle__center"></div>
</div>

Любые предложения о том, как я могу сделать это лучше?

Мне нужен редактируемый текст сегмента, и каждый сегмент должен быть перемещаемым. Возможно ли это?

Вот пример скриншота того, чего я пытаюсь достичь.

круг

Комментарии:

1. Я знаю об этом. Однажды я спросил, как создать другую фигуру, и ответил только на то, что у меня есть «learn canvas». Это не ответ, это, как «я не могу дышать», и кто-то говорит вам: «научись дышать». Я пытаюсь спросить мб людей, которые знают, как это решить, какие-то подсказки или что-то в этом роде. Я не прошу этого делать, и я просто скопирую и вставлю его. Я могу нарисовать этот круг в Illustrator и просто поместить его в свой код как вектор, но это нехорошо

2. Поскольку вы новичок, я отредактировал ваш вопрос, чтобы попытаться уточнить фокус для возможных идей и, возможно, решения. Но только боги могут решить, будет ли ваш вопрос повторно открыт.

3. Вы спрашиваете, как изогнуть текст вокруг дуг? — Я знаю, как разделить слово на части, но мне нужно полностью редактируемое слово, а не 1 миллиард тегов span. В вашем HTML нет текста. — потому что он только за пределами круга

4. Вы читаете последнюю правку? Возможно, я переопределил предыдущее редактирование. Извините @isherwood

5. Вы можете повторно отредактировать вопрос и заменить слово live на dynamic . Который, по сути, доступен для редактирования.