Question

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

我希望圆圈可以触摸但不会重叠，我希望整个设置位于其父div的中间位置。

图表：http://chriscanipe.com/images/circles.jpg

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

Answer 1

您需要限制或选择一些限制，超出您的初始问题。在您的示例图像中，您是如何决定旋转由中心形成的三角形？你在叫什么＆＃34;中心＆＃34;三角形？

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

假设原点的第一个圆（0,0）假设第二个圆圈位于此正上方（0，r1 + r2）计算第三个点 - 这是两个圆的交点。一个以原点为中心，半径为r1 + r3，另一个以（0，r1 + r2）为中心，半径为r2 + r3。

现在你有这三点你可以计算一个＆＃34;中心＆＃34;

然后，您可以根据此中心和div的尺寸绘制圆圈。

Answer 2

这称为Circles of Apollonius问题。您可以使用链接找到解决方案。

我已经对此进行了迭代推广。给定两条曲线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。

Answer 3

这是我对此问题的解决方案的实现。它包含了许多几何和trig标识 - 但没有调用trig函数。

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 <<<

根据半径计算三个触摸圆的位置

3 个答案: