jquery - Responsive Circle 内圈

Question

我正在尝试像在 jsfiddle 中一样创建一个响应式圆圈，其中有一个内圆圈。 如果我调整页面大小，我希望外圈和内圈自动调整。

我怎样才能实现这种行为？

这是我尝试过的:http://jsfiddle.net/ineffablep/x03f61db/

代码:

function createFields() {
  $('.field').remove();
  var container = $('#container');
  for (var i = 0; i < +$('input:text').val() + 1; i++) {
    $('<div/>', {
      'class': 'field',
      'text': i
    }).appendTo(container);
  }
}

function distributeFields() {


  var fields = $('.field'),
    container = $('#container'),
    width = center.width() * 2,
    height = center.height() * 2,
    angle = 0,
    step = (2 * Math.PI) / fields.length;
  var radius = width / 2;
  var containerLength = $('input:text').val();
  angle = step * (containerLength - 1);

  fields.each(function() {

    var x = Math.round(width + radius * Math.cos(angle));
    var y = Math.round(height + radius * Math.sin(angle));
    $(this).css({
      right: x + 'px',
      top: y + 'px'
    });
    angle -= step;

  });
}
var center = $('#center');

$(window).resize(function(height) {

  $('#container').width($(window).height() * 0.9)
  $('#container').height($(window).height() * 0.9)
  var width = $('#container').width() * 0.4;
  console.log("width", $('#container').width());
  console.log("height", $('#container').height());
  var radius = width / 2;
  width += 'px';
  radius += 'px';
  center.css({
    width: width,
    height: width,
    '-moz-border-radius': radius,
    '-webkit-border-radius': radius,
    'border-radius': radius
  });

  createFields();
  distributeFields();
  // rest of your code for font-size setting etc..
});

$(window).resize();


$('input').change(function() {
  createFields();
  distributeFields();
});

body {
  padding: 2em;
}
#center {
  position: absolute;
  background: #00A8D9;
  width: 50%;
  height: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: 3px solid #000;
  top: 55%;
  left: 27%;
}
.field {
  width: 20px;
  height: 20px;
  position: absolute;
  color: #f00;
}

Number of fields:
<input type="text" value="60" />
<div id="container">
  <div id="center"></div>

</div>

Answer 1

这是一个 exemple关于如何处理这个问题。

---

我首先做的是为您的 #container 添加一个 css 规则:

#container{
    position:relative;
    float:right;
}

然后，我编辑了 #center 元素的 top 和 left CSS 值，并添加了 box-sizing 属性(防止 border 崩溃 width 行为):

#center { 
    position:absolute;
    background: #00A8D9;
    width: 50%;
    height: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border:3px solid #000;
    top:100%;
    left:0%;
    box-sizing:border-box;
}

---

我发现您的字段圆圈的中心位于 #container 的左下角，因此我为 #center 元素重现了此行为。这就是它位于 top:100% 和 left:0% 的原因，但是为了准确地居中于左下角，我需要添加负边距 ( #center 大小的一半)，根据 #container 大小计算:

$(window).resize(function(height) {

    $('#container').width($(window).height()*0.9);
    $('#container').height($(window).height()*0.9);
    var width = $('#container').width() * 0.4;
    var radius = width;
    var topPos = (width/2)*(-1.2);
    var rightPos = (width/2)*(-1.2);
    radius += 'px';
    topPos+="px";
    rightPos+="px";
    $('#center').css({
        left:'0%',
        top: '100%',
        'margin-top':topPos,
        'margin-left':rightPos,
        '-moz-border-radius' : radius,
        '-webkit-border-radius' : radius,
        'border-radius' : radius
    });

    createFields();
    distributeFields();
    // rest of your code for font-size setting etc..
});

PS:我发现你的字段圆的中心在 #container 的左下角 |事实并非如此，处理一些像素。您定位字段的方式可能会导致这个小差距。您只需要找到一种方法来使用与定位字段相同的逻辑来调整边距