Как сделать так, чтобы круг всегда касался только края друг с другом? - PullRequest
Новая
       4

Как сделать так, чтобы круг всегда касался только края друг с другом?

1 голос
/ 03 мая 2020

Я пытаюсь соединить три круга друг с другом. До сих пор я умею общаться друг с другом. Как сделать так, чтобы другой касался других, когда радиус круга является динамическим c?

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

Есть ли способ сделать это? Любая помощь или предложение приветствуется. Something like this.

Codesandbox 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      .circle-diagram {
        height: 100%;
        min-height: 190px;
      }
      .circle-diagram .solar-grid-wrapper {
        display: flex;
      }
      .circle-diagram .yellow-circle,
      .circle-diagram .yellow-circle-shadow {
        border-radius: 50%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 12px;
        width: 130px;
        height: 130px;
        background-color: #feda02;
      }
      .circle-diagram .green-circle,
      .circle-diagram .green-circle-shadow {
        border-radius: 50%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 12px;
        width: 91.05px;
        height: 91.05px;
        background-color: #25dc8a;
        left: 124px;
        top: 15px;
      }
      .circle-diagram .blue-circle,
      .circle-diagram .blue-circle-shadow {
        border-radius: 50%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 12px;
        width: 119.8px;
        height: 119.8px;
        background: #3d7ff9;
        left: 108px;
        top: 106px;
      }
      .circle-diagram .symbol {
        height: 15px;
        margin-bottom: 8px;
      }
      .circle-diagram .value {
        z-index: 10;
        opacity: 1;
        font-weight: 550;
      }

      #randomButton {
        margin-top: 60px;
        border: 1px solid black;
        background: #3d7ff9;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="circle-diagram">
      <div class="solar-grid-wrapper">
        <div
          class="yellow-circle"
          id="circle1"
          style="width: 150px; height: 150px;"
        >
          <div class="value">Cool text 1</div>
        </div>
        <div
          class="blue-circle"
          id="circle2"
          style="width: 160px; height: 160px;"
        >
          <div class="value">Cool text 2</div>
        </div>
      </div>
      <div
        class="green-circle"
        id="circle3"
        style="width: 222px; height: 222px;"
      >
        <div class="value">Cool text 3</div>
      </div>
    </div>

    <button id="randomButton">Random Width</button>
  </body>
  <script>
    document.getElementById("randomButton").addEventListener(
      "click",
      function() {
        function random(min, max) {
          return Math.round(Math.random() * Math.abs(max - min) + min);
        }
        const randomNumber1 = random(150, 220);
        const randomNumber2 = random(150, 220);
        const randomNumber3 = random(150, 220);
        document.getElementById("circle1").style.width = `${randomNumber1}px`;
        document.getElementById("circle1").style.height = `${randomNumber1}px`;
        document.getElementById("circle2").style.width = `${randomNumber2}px`;
        document.getElementById("circle2").style.height = `${randomNumber2}px`;
        document.getElementById("circle3").style.width = `${randomNumber3}px`;
        document.getElementById("circle3").style.height = `${randomNumber3}px`;
      },
      false
    );
  </script>
</html>

Ответы [ 2 ]

1 голос
/ 03 мая 2020 

document.getElementById("randomButton").addEventListener(
  "click",
  function() {
    function random(min, max) {
      return Math.round(Math.random() * Math.abs(max - min) + min);
    }
    const r1 = random(150, 220);
    const r2 = random(150, 220);
    const r3 = random(150, 220);
    var circle1 = document.getElementById("circle1"),
      circle2 = document.getElementById("circle2"),
      circle3 = document.getElementById("circle3");
   
    var h =(r1>r2)? Math.sqrt((r1/2+r3/2)*(r1/2+r3/2)-r1*r1/4):Math.sqrt((r2/2+r3/2)*(r2/2+r3/2)-r2*r2/4),
    h2 = (r1>r2)? (r1+r3)/2:(r2+r3)/2,
    alpha = (r1>r2)?r1/r2:r2/r1;
    
    circle3.style.left =`${alpha*(h-h2)}px`;
    circle3.style.top =`${(5/4)*alpha*(r1-r2)/2}px`;
    
    circle1.style.width = `${r1}px`;
    circle1.style.height = `${r1}px`;
    circle2.style.width = `${r2}px`;
    circle2.style.height = `${r2}px`;
    circle3.style.width = `${r3}px`;
    circle3.style.height = `${r3}px`;
  },
  false
);
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.circle-diagram {
  display: flex;
  align-items: center;
 
}

.circle-diagram .solar-grid-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: gray;
}

.circle-diagram .yellow-circle,
.circle-diagram .yellow-circle-shadow {
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 12px;
  width: 130px;
  height: 130px;
  background-color: #feda02;
  position: relative;
}

.circle-diagram .green-circle,
.circle-diagram .green-circle-shadow {
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 12px;
  background-color: #25dc8a;
  position: relative;
  top: 0;
}

.circle-diagram .blue-circle,
.circle-diagram .blue-circle-shadow {
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 12px;
  width: 119.8px;
  height: 119.8px;
  background: #3d7ff9;
  position: relative;
}

.circle-diagram .symbol {
  height: 15px;
  margin-bottom: 8px;
}

.circle-diagram .value {
  z-index: 10;
  opacity: 1;
  font-weight: 550;
}

#randomButton {
  margin-top: 60px;
  border: 1px solid black;
  background: #3d7ff9;
  padding: 10px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Static Template</title>
</head>

<body>
  <div class="circle-diagram">
    <div class="solar-grid-wrapper">
      <div class="yellow-circle" id="circle1" style="width: 160px; height: 160px;">
        <div class="value">Cool text 1</div>
      </div>
      <div class="blue-circle" id="circle2" style="width: 150px; height: 150px;">
        <div class="value">Cool text 2</div>
      </div>
    </div>
    <div class="green-circle" id="circle3" style="width: 222px; height: 222px;top:7.5Px;left:-18px;">
      <div class="value">Cool text 3</div>
    </div>
  </div>

  <button id="randomButton">Random Width</button>
</body>

</html>
0 голосов
/ 03 мая 2020

Я не уверен, что вы хотите, но вот модифицированный пример с кругами, касающимися друг друга: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      .circle-diagram {
        height: 100%;
        min-height: 190px;
      }
      .circle-diagram .solar-grid-wrapper {
        display: flex;
      }
      .circle-diagram .yellow-circle,
      .circle-diagram .yellow-circle-shadow {
        border-radius: 50%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 12px;
        width: 130px;
        height: 130px;
        background-color: #feda02;
      }
      .circle-diagram .green-circle,
      .circle-diagram .green-circle-shadow {
        border-radius: 50%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 12px;
        width: 91.05px;
        height: 91.05px;
        background-color: #25dc8a;
        left: 124px;
        top: 15px;
      }
      .circle-diagram .blue-circle,
      .circle-diagram .blue-circle-shadow {
        border-radius: 50%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 12px;
        width: 119.8px;
        height: 119.8px;
        background: #3d7ff9;
        left: 108px;
        top: 106px;
      }
      .circle-diagram .symbol {
        height: 15px;
        margin-bottom: 8px;
      }
      .circle-diagram .value {
        z-index: 10;
        opacity: 1;
        font-weight: 550;
      }

      #randomButton {
        margin-top: 60px;
        border: 1px solid black;
        background: #3d7ff9;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="circle-diagram">
      <div class="solar-grid-wrapper">
        <div
          class="yellow-circle"
          id="circle1"
          style="width: 150px; height: 150px"
        >
          <div class="value">Cool text 1</div>
        </div>
        <div
          class="blue-circle"
          id="circle2"
          style="width: 160px; height: 160px;margin-left: -10px"
        >
          <div class="value">Cool text 2</div>
        </div>
      </div>
      <div
        class="green-circle"
        id="circle3"
        style="width: 222px; height: 222px;margin-top: -30px"
      >
        <div class="value">Cool text 3</div>
      </div>
    </div>

    <button id="randomButton">Random Width</button>
  </body>
  <script>
    document.getElementById("randomButton").addEventListener(
      "click",
      function() {
        function random(min, max) {
          return Math.round(Math.random() * Math.abs(max - min) + min);
        }
        const randomNumber1 = random(150, 220);
        const randomMargin2 = random(10, randomNumber1 / 4);
        const randomNumber2 = random(150, 220);
        const randomNumber3 = random(150, 220);
        const randomMargin3 = random(10, randomNumber2 / 4);
        document.getElementById("circle1").style.width = `${randomNumber1}px`;
        document.getElementById("circle1").style.height = `${randomNumber1}px`;
        document.getElementById("circle2").style.width = `${randomNumber2}px`;
        document.getElementById("circle2").style.height = `${randomNumber2}px`;
        document.getElementById("circle2").style.marginLeft = `-${randomMargin2 }px`;
        document.getElementById("circle3").style.width = `${randomNumber3}px`;
        document.getElementById("circle3").style.height = `${randomNumber3}px`;
        document.getElementById("circle3").style.marginTop = `-${randomMargin3 }px`;
      },
      false
    );
  </script>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...