geometry - 根据半径计算三个接触圆的位置

Question

这最终是一个几何问题。我正在使用 raphaeljs 为一系列数据中的每个项目绘制 3 个区域圆圈。每个圆圈代表一个类别中的项目数。

我希望圆圈接触但不重叠，并且我希望整个集合位于其父 div 的中间。

图在这里：http ://chriscanipe.com/images/circles.jpg

只知道每个圆的半径以及父 div 的宽度和高度，我将如何计算每个圆的中心的 xy 坐标？我想得越多，我想我实际上是在尝试绘制一个三角形，其中每个角都是圆的 x,y 中心。

score 1 · Accepted Answer

在您最初的问题之外，您需要在此处限制或选择许多限制条件。在您的示例图像中，您如何决定旋转由中心形成的三角形？你把三角形的“中心”称为什么？

解决此问题的一种方法可能是：

假设第一个圆在原点 (0,0) 假设第二个圆在这个点的正上方 (0,r1+r2) 计算第三个点——这是两个圆的交点。一个以原点为中心，半径为 r1+r3，另一个以 (0,r1+r2) 为中心，半径为 r2+r3。

现在有了这三个点就可以算出一个“中心”

然后你可以根据这个中心和你的 div 的尺寸来绘制你的圆圈。

score 1 · Accepted Answer

这被称为阿波罗尼乌斯圈问题。您可以使用链接找到解决方案。

我已经对此进行了迭代推广。给定两条曲线 A 和 B 彼此相切，变换第三条曲线 C 使其与其他两条曲线相切。用户在两条固定曲线上以点选择的形式提供一些提示。算法进行如下：

设 p 和 q 是投影到 A 和 B 上的选定点。
变换 C 使其与 p 和 q 相关。
由于我们不期望 C 在 p 和 q 处与 A 和 B 相切，因此我们需要找到 p 和 q 的新选择。
计算在这些点处相交的曲线在 p 和 q 处的密切圆（或曲率为 0 的线）。
计算圆（和线）之间的交线。
取 p 和 q 作为和弦中点在 A 和 B 上的投影，从 2 开始重复，直到相交的弦足够小。

当然有很多琐碎的细节，但是任何能够实现该算法的人都应该能够解决这些问题。

我很快就会添加插图，但我目前无法访问 Mathematica。

score 0 · Accepted Answer

这是我对这个问题的解决方案的实现。它包含许多几何和三角恒等式——但没有调用三角函数。

HTML >>>
<!DOCTYPE HTML>
<html>
  <head>
    <title>
      Tangent Circles in a Box
    </title>
    <link rel="stylesheet" href="CSS/tangent_circles.css" type="text/css" />
  </head>
  <body>
    <div id="main_container">
      <div id="inner_container">
        <img class="circle" id="left_circle" src="http://www.clker.com/cliparts/Z/Z/S/Y/S/w/red-circle-cross-transparent-background-md.png" alt="left_circle" />
        <img class="circle" id="right_circle" src="http://www.clker.com/cliparts/Z/Z/S/Y/S/w/red-circle-cross-transparent-background-md.png" alt="right_circle" />
        <img class="circle" id="third_circle" src="http://www.clker.com/cliparts/Z/Z/S/Y/S/w/red-circle-cross-transparent-background-md.png" alt="third_circle" />
      </div>
    </div>
    <div id="userControls">
      <form id="userControlsForm">
        Circle One <input id="circleOneInput" type="text" placeholder="Enter Numeric Value" value=""><br>
        Circle Two <input id="circleTwoInput" type="text" placeholder="Enter Numeric Value" value=""><br>
        Circle Three <input id="circleThreeInput" type="text" placeholder="Enter Numeric Value" value="">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
        <script src="JS/tangent_circles.js"></script> 
      </form>
    </div>
  </body>
</html>
HTML <<<

CSS >>>
body 
{
  background-color: white;
}

#main_container
{
  background-color: #cccccc;
  width: 800px;
  height: 800px;
  margin: auto;
  border: solid #cccccc 1px;
  -o-border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}   

  #inner_container 
  {     
    width: 100%;
    height: 100%;
    position: relative;
  }   

    .circle
    {
      position: absolute;
      text-align: center;
      font-family: fantasy;
    }
        #left_circle
    {
      top: 0px;
      left: 0px;
      width: 300px;
      height: 300px;
    }

    #right_circle
    {
      top: 0px;
      left: 0px;
      width: 300px;
      height: 300px;
    }

    #third_circle
    {
      top: 0px;
      left: 0px;
      width: 300px;
      height: 300px;
    }

    #userControls
    {
      padding: 30px;
      width: 400px;
      height: 200px;
      margin: auto;
      margin-top: 30px;
      background-color: #dddddd;
    }

      #circleOneInput
      {
        margin-bottom: 10px;
      }

      #circleTwoInput
      {
        margin-bottom: 10px;
      }

#userControls
{
  position: absolute;
  left    : 20px;
  top     : 50px;
  width   : 200px;
}
CSS <<<
 JS >>>
$(function() {
  function changeCircles(){
    $("#inputWarning").remove();
    var radius1 = parseInt( $("#circleOneInput").val(), 10);
    var radius2 = parseInt( $("#circleTwoInput").val(), 10);
    var radius3 = parseInt( $("#circleThreeInput").val(), 10);
    console.log( 'radius1 = ' + radius1 + ', ' +
                 'radius2 = ' + radius2 + ', ' +
                 'radius3 = ' + radius3
      );
    if ( isNaN( radius1 ) || isNaN( radius2 ) || isNaN( radius3 ))
    {
      $("#userControlsForm").after('<span id="inputWarning" style="color: red;">Only Numbers Please</span>');
    }
    else
    { 
      // normalize circle sizes

      if (radius1 < 10)
      {
        radius1 = 10;
      }

      if (radius2 < 10)
      {
        radius2 = 10;
      }

      if (radius3 < 10) 
      {
        radius3 = 10;
      }

      if (radius1 > 150)
      {
        radius1 = 150;
      }

      if (radius2 > 150)
      {
        radius2 = 150;
      }

      if (radius3 > 150)
      {   
        radius3 = 150;
      } 

      // do the actual circle changing
      // 1) calculate
      // 2) animate
      // calculate sides of triangle
      var a = radius2 + radius3;
      var b = radius1 + radius3;
      var c = radius2 + radius1;

      // get dimensions of containing div
      var container_width  = $("#inner_container").width();
      var container_height = $("#inner_container").height();

      var center_x = container_width / 2.0;
      var center_y = container_height / 2.0;

      // calculate cosine and sine of angle inside circle b
      var cos_beta = ((a * a) + (c * c) - (b * b))/(2 * a * c);
      var sin_beta = Math.sqrt( 1 - cos_beta * cos_beta );

      // calculate coordinates of circles a and b
      var Ax = 0;
      var Ay = 0;
      var Bx = radius1 + radius2;
      var By = 0;

      // calculate cosine and sine of angle between triangle and horizontal
      var cos_phi = (Bx - Ax)/c;
      var sin_phi = Math.sqrt( 1 - cos_phi * cos_phi );

      // calculate the cosine and sine of the sum of both angles
      var cos_phiNbeta = cos_phi * cos_beta - sin_beta * sin_phi;
      var sin_phiNbeta = cos_phi * sin_beta + sin_phi * cos_beta;

      // calculate coordinates of circle c
      var Cx = Bx - cos_phiNbeta * a;
      var Cy = By + sin_phiNbeta * a;

      // find centroid
      var centroid_x = (Ax + Bx + Cx) / 3.0;
      var centroid_y = (Ay + By + Cy) / 3.0;

      // get coordinate adjustment
      var adjust_x = center_x - centroid_x;
      var adjust_y = center_y - centroid_y;

      // convert coordinates to div position values
      var A_left = Ax + adjust_x - radius1;
      var A_top  = Ay + adjust_y - radius1;
      var B_left = Bx + adjust_x - radius2;
      var B_top  = By + adjust_y - radius2;
      var C_left = Cx + adjust_x - radius3;
      var C_top  = Cy + adjust_y - radius3;

      // calculate div dimensions
      var A_width  = 2 * radius1;
      var A_height = 2 * radius1;
      var B_width  = 2 * radius2;
      var B_height = 2 * radius2;
      var C_width  = 2 * radius3;
      var C_height = 2 * radius3;

    // the following needs Jquery
      var circle_a = $("#left_circle");
      var circle_b = $("#right_circle");
      var circle_c = $("#third_circle");

      circle_a.animate( {
                        'top'   : A_top + 'px',
                        'left'  : A_left + 'px',
                        'width' : A_width + 'px',
                        'height': A_height + 'px'
                        }, 500 );

      circle_b.animate( {
                        'top'   : B_top + 'px',
                        'left'  : B_left + 'px',
                        'width' : B_width + 'px',
                        'height': B_height + 'px'
                        }, 500 );


      circle_c.animate( {
                        'top'   : C_top + 'px',
                        'left'  : C_left + 'px',
                        'width' : C_width + 'px',
                        'height': C_height + 'px'
                        }, 500 );


    }
  }
  $("#circleOneInput").keyup(changeCircles);
  $("#circleTwoInput").keyup(changeCircles);
  $("#circleThreeInput").keyup(changeCircles);
}); // end ready
 JS <<<

geometry - 根据半径计算三个接触圆的位置

3 回答 3

Related

Reference