Question

我正在试图弄清楚如何根据给定的程度从圆心向外绘制一条线。（我最终想要每30度产生一条线，总共产生12条线）

下面是一张与我想要达到的相似的图片。

我目前所在圈子的CSS：

.circle-container{
    display: block;
    position: absolute;
    top: 15.5%;
    left: 14.5%;
    background: #fff;
    width: 11.5em;
    height: 11.5em;
    border-radius: 50%;
    border-style: solid;
    border-width: thin;
    border-color: #bfbfbf;
    margin: 0em;
}

我不确定我应该从哪里开始。

Answer 1

我会使用Canvas或SVG ...否则你最终会出现很多非语义元素，仅仅是为了造型。

然而，一个简短的例子

.circle-container {
  display: block;
  position: absolute;
  top: 15.5%;
  left: 14.5%;
  background: #fff;
  width: 11.5em;
  height: 11.5em;
  border-radius: 50%;
  border-style: solid;
  border-width: thin;
  border-color: #bfbfbf;
  margin: 0em;
}
.radius {
  position: absolute;
  width: 50%;
  height: 3px;
  left: 50%;
  top: 50%;
  background: red;
  transform-origin: left center;
}
.two {
  background: green;
  transform: rotate(-30deg);
}

<div class="circle-container">
  <div class="radius"></div>
  <div class="radius two"></div>
</div>

Answer 2

您可以通过将height属性设置为0，将宽度设置为50%来创建一条线，这是直径的一半并创建边框。

要进行转换，您需要将rotate属性与transform-origin一起使用。

这是一个简单的例子。

＆＃13;

var radius = document.getElementById("radius");
var rotate = document.getElementById("rotate");

var rotation = 0;

rotate.addEventListener("click", function() {
    rotation -= 30;
    radius.style.transform = "rotate(" + rotation + "deg)";
    radius.style.transformOrigin = "center right";
});

＆＃13;

.circle-container{
    display: block;
    position: absolute;
    top: 15.5%;
    left: 14.5%;
    background: #fff;
    width: 11.5em;
    height: 11.5em;
    border-radius: 50%;
    border-style: solid;
    border-width: thin;
    border-color: #bfbfbf;
    margin: 0em;
}

#radius {
  height: 0px;
  width: 50%;
  border: 1px solid black;
  top: 50%;
  position: absolute;
}

＆＃13;

<div class="circle-container">
  <div id="radius"></div>
</div>

<button id="rotate">Rotate Radius</button>

＆＃13;

至于每30度有一条线，让我们考虑一下。圆圈是360度，这意味着我们需要12条线。在HTML中，这将需要大量的开销。为此，我们必须进行大量的DOM操作。

为此，我建议使用Canvas或其中一个JavaScript画布库，如jcanvas。

Answer 3

如果你想要一些超级灵活的东西，我会做这样的事情......你可以添加另一个带有ID的.line并给每个人一个单独的旋转以获得你所有的角度。

.line{
    width: 1px;
    height: 50%;
    background: #000;
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform-origin: bottom center;
    -webkit-transform-origin: bottom center;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
.line:before{
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    width: 15px;
    height: 15px;
    border-radius: 100%;
    background: #000;
}

<div class="circle-container">
    <div class="line"></div>
</div>

Answer 4

Canvas元素或SVG会更容易，但如果您只想使用简单HTML元素的CSS样式，请查看本教程以创建css时钟： https://cssanimation.rocks/clocks/

Answer 5

另一种解决方案是克隆线条，如你所说，你需要12行

请参阅此处： jsfiddle

JQ：

var degr = 0;
var rotation = 0;
//create a rotate function
jQuery.fn.rotate = function(degrees) {
    $(this).css({'transform' : 'rotate('+ degrees +'deg)'});
};
//clone the lines
for(var i = 1; i < 5; i++){
    $(".line").clone().appendTo(".circle-container")
}


//rotate the lines
$('.line').each(function() {

degr += 30;
$(this).rotate(degr);
});

HTML：

<div class="circle-container">
    <div class="line">

    </div>

</div>

CSS补充道：

.circle-container:before {
  position:absolute;
  content:"";
  width:30px;
  height:30px;
  background:#000;
  left:0;
  right:0;
  margin:0 auto;
  top:calc(50% - 15px);
  border-radius:100%;
}
.circle-container .line {
  position: absolute;
  width: 50%;
  height: 3px;
  left: 50%;
  top: 50%;
  background: #000;
  transform-origin: left center;
  transform: rotate(0deg);
}

使用CSS在圆圈中绘制半径线

5 个答案: