Question

我的问题基于this question。这篇文章的代码太棒了。

它会创建一个与基圆相切的卫星圆环（在基圆之外）。

此部分计算圆的外部半径：

var angle = Math.PI / n;
var s = Math.sin(angle);
var r = baseRadius * s / (1-s);

如果我希望圆环在基圆内切线，如何计算圆的半径？

非常感谢你的帮助。

Answer 1

按Sine和Cosine以及PI修改子圈子。

您可以将其用作基线：

//Classes
var Coord = (function() {
  function Coord(x, y) {
    this.x = x;
    this.y = y;
  }
  return Coord;
}());
var Circle = (function() {
  function Circle(origo, radius) {
    this.origo = origo;
    this.radius = radius;
  }
  Circle.prototype.circumference = function() {
    return this.radius * 2 * Math.PI;
  };
  return Circle;
}());
//functions
function innerTangentCircles(master, count) {
  if (count === void 0) {
    count = 4;
  }
  var result = [];
  for (var index = 0; index < count; index++) {
    var cos = Math.cos(((Math.PI * 2) / count) * index);
    var sin = Math.sin(((Math.PI * 2) / count) * index);
    var circle = new Circle(new Coord(master.origo.x + (master.radius * cos) - (master.radius / (count / 2)) * cos, master.origo.y + (master.radius * sin) - (master.radius / (count / 2)) * sin), master.radius / (count / 2));
    result.push(circle);
  }
  return result;
}
//>>Test<<
//Create circles
var bigC = new Circle(new Coord(200, 200), 200);
//Create DOM
var c = document.createElement("canvas").getContext("2d");
c.canvas.width = 500;
c.canvas.height = 500;
document.body.appendChild(c.canvas);
//Run loop
function draw(i) {
  var circles = innerTangentCircles(bigC, i);
  c.fillStyle = "red";
  c.beginPath();
  c.arc(bigC.origo.x, bigC.origo.y, bigC.radius, 0, Math.PI * 2);
  c.fill();
  c.closePath();
  c.fillStyle = "yellow";
  for (var index = 0; index < circles.length; index++) {
    var circle = circles[index];
    c.beginPath();
    c.arc(circle.origo.x, circle.origo.y, circle.radius, 0, Math.PI * 2);
    c.fill();
    c.closePath();
  }
  if (i > 500) {
    i = 4;
  }
  i = i * 2;
  setTimeout(function() {
    draw(i);
  }, 1000);
}
draw(8);

Answer 2

/**
 * Coord
 */
var Coord = (function() {
  function Coord(x, y) {
    this.x = x;
    this.y = y;
  }
  return Coord;
}());
/**
 * Circle
 */
var Circle = (function() {
  function Circle(origo, radius) {
    this.origo = origo;
    this.radius = radius;
  }
  Circle.radiusFromCircumference = function(circumference) {
    return circumference / Math.PI / 2;
  };
  Circle.circumference = function(radius) {
    return 2 * Math.PI * radius;
  };
  Circle.prototype.circumference = function() {
    return Circle.circumference(this.radius);
  };
  return Circle;
}());
//Functions
function distance(x1, y1, x2, y2) {
  return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
}

function getRadian(count, index) {
  return ((Math.PI * 2) / count) * index;
}

function circlesFromCircumference(master, count) {
  var circles = [];
  var masterCircumference = master.circumference();
  var innerRadius = Circle.radiusFromCircumference(masterCircumference);
  //var innerCircumference = Circle.circumference(innerRadius);
  var circleRadius = 0;
  var radian = getRadian(count, 1);
  var maxCalc = 1000;
  while (maxCalc--) {
    var dist = distance(Math.cos(0) * innerRadius + master.origo.x, Math.sin(0) * innerRadius + master.origo.y, Math.cos(radian) * innerRadius + master.origo.x, Math.sin(radian) * innerRadius + master.origo.y);
    if (Math.abs(dist / 2 - circleRadius) < 0.5) {
      break;
    }
    circleRadius = dist / 2;
    innerRadius = master.radius - circleRadius;
  }
  for (var index = 0; index < count; index++) {
    var radian = getRadian(count, index);
    var cos = Math.cos(radian);
    var sin = Math.sin(radian);
    var c = new Circle(new Coord(cos * innerRadius + master.origo.x, sin * innerRadius + master.origo.y), circleRadius);
    circles.push(c);
  }
  return circles;
}
//>>TEST<<
var c = document.createElement("canvas").getContext("2d");
c.canvas.height = 200;
c.canvas.width = c.canvas.height;
document.body.appendChild(c.canvas);
var bigC = new Circle(new Coord(c.canvas.height / 2, c.canvas.height / 2), c.canvas.height / 2.1);

function draw(size) {
  size++;
  c.fillStyle = "red";
  c.beginPath();
  c.arc(bigC.origo.x, bigC.origo.y, bigC.radius, 0, Math.PI * 2);
  c.fill();
  c.closePath();
  var circles = circlesFromCircumference(bigC, size);
  c.fillStyle = "yellow";
  for (var index = 0; index < circles.length; index++) {
    var circle = circles[index];
    c.beginPath();
    c.arc(circle.origo.x, circle.origo.y, circle.radius, 0, Math.PI * 2);
    c.fill();
    c.closePath();
  }
  setTimeout(function() {
    if (size > 32) {
      size = 2;
    }
    draw(size);
  }, 1000 / 4);
}
draw(1);

切成圆圈的圆环刻在另一个圆圈中

2 个答案: