时间戳

首页 > 解决方案 > 在 SASS 中给定 x 个具有固定直径的圆的圆周围定位圆

sass - 在 SASS 中给定 x 个具有固定直径的圆的圆周围定位圆

问题描述

两部分的问题：

最终目标是这样的，ala graph DB visualisers - 但在 html/css/sass 最终目标

第 1 部分：如何围绕一个圆圈定位 x 个圆圈，以便边缘接触（或者最好有一点空白）。例如，这就是我要给定的 3、6 和 7 个圆圈。我正在尝试使用 SASS 让它工作，但是如果有一个库或其他东西可以做我想做的事，我宁愿使用它——我只是在努力制定搜索短语。

在此处输入图像描述

我正在使用这里的三角函数，并从这里偷了圆圈排列。

到目前为止我所拥有的CODEPEN 。

我数学不好，但一些朋友给了我你会在下面找到的公式，它应该可以计算出到外圆中心的距离。$distance: tan((180-($angle))/2) * $radius;. 但是它没有像我预期的那样做 - 给定 6 个圆，直径为 100，我预计输出为 100，但我得到 86.602...

这是 sass - 不过可能更容易在 codepen 中查看。

      @function strip-unit($number) {
        @if type-of($number) == 'number' and not unitless($number) {
          @return $number / ($number * 0 + 1);
        }
        @return $number;
      }

    @mixin on-circle($item-count, $circle-size, $item-size, $break-at) {
      position: relative;
      height: $circle-size;
      padding: 0;
      border-radius: 50%;
      list-style: none;

      >* {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: $item-size;
        height: $item-size;
        margin: -($item-size / 2);

        $angle: (360 / $break-at);
        $rot: 0;
        $prevLayer: 0;

        @for $i from 1 through $item-count {
          $layer: ceil($i/ $break-at);
          $layerMinusOne: $layer - 1;
          // MoveX figured out by aligning stuff by eye
          // item-count 3   4   5   6   7   8   9   10 ...12    13   14...20
          // moveX (%)  57  70  85 100  115 130 145 160   192   207  225  315
          $item-radius: strip-unit($item-size) / 2;

          // !! This is where i'm having trouble
          $distance: tan((180-($angle * 1deg))/2) * $item-radius;
          @debug "tan((180-#{$angle})/2) * #{$item-radius} = #{$distance}";

          $moveX: ( $distance / strip-unit($item-size)) * 100 * 1%;
          @debug "moveX: #{$moveX}";

          @if $layer != $prevLayer {
            $prevLayer: $layer;
            $rot: $rot + $angle/2;
          }

          &:nth-of-type(#{$i}) {
            transform:
             // !! This is where the 'percent of circle diameter' measurements come in, translateX uses the size of the element being transformed when % is used. 
              rotate($rot * 1deg) translateX($moveX * $layer) rotate($rot * -1deg);
          }
          $rot: $rot+$angle;
        }
      }
    }

    $numOfCircles: 3; // <- Change me in the codepen 
    .circle-container {
      @include on-circle($item-count: 28, $circle-size: 200px, $item-size: 50px, 
    $break-at: $numOfCircles);
      margin: 5em auto 5em;
      border: solid 5px red;

      .around-a-circle {
        text-align: center;
        border-radius: 50%;
        border: solid 1px #118be1;
      }
    }

第 2 部分：额外的层。

如上所示，我的最终目标是在环中显示 x 个圆形元素，其中最内层的环由 y 个元素组成，并从那里冒出。

正如我所说，我宁愿使用图书馆，但我找不到任何我想要的东西。我打算使用内环作为起点和每个交替层，旋转一个额外的位并将元素放置在之前的环元素之间，但我再次在尺寸和偏移量上苦苦挣扎。

 $layer: ceil($i/ $break-at);
...
 @if $layer != $prevLayer {
    $prevLayer: $layer;
    $rot: $rot + $angle/2;
  }

上面的代码主要是这样做的，但是与我的最终目标照片相比，间距没有优化，而且空白太多了。

标签： sasstrigonometry

解决方案

距离需要在圆心 1 和圆心 2 之间，并且是所有圆的半径的一半。

我不知道 sass 所以这里有一个有效的 JS 版本作为证明它有效的证据。

https://jsfiddle.net/hk5spy20/

如果您将第 32-33 行从

var x1 = pointXY[0].x;
var y1 = pointXY[0].y;

到

var x1 = xPos;
var y1 = yPos;

您将复制您当前正在执行的操作，这会导致圆圈重叠。

***** 添加 *****

由于圆的半径增大，当您向外扩展时，您使第 2、第 3、第 4 级气泡工作的方式会变得有间隙。

它不会以这种方式工作。

我有一些东西，但需要工作，但到目前为止我有这个...... https://jsfiddle.net/hd7qp06b/2/

我认为对于每一行，您都需要两组不同的公式才能使其完美运行，第二行有效，第三行无效，这是需要新公式的地方。会回到这个。

这似乎有效：https ://jsfiddle.net/eo170zsu/

您必须跟踪一对相邻的气泡并在其旁边附加气泡。如果将气泡 9 和 15 的坐标放在堆栈上，它会将新气泡完美地放在它旁边。但是，您不能同时将气泡 9 和 16 放入堆栈，因为这会导致重叠。有一系列对是安全的，并且对于某些级别可能是一致的，我怀疑奇数/偶数级别有不同的配对规则。

实际上，考虑一下，只需对 9,15 和 9,16 分别处理，如果屏幕上的两个圆圈之间有重叠，请将其丢弃并尝试下一对。

推荐阅读