主页 / 问题 / 970255
Accepted
pepel_xD
Asked:2020-04-16 17:43:57 +0800 CST2020-04-16 17:43:57 +0800 CST

将内圈的运动限制在外圈

  • 772

在画布上画了 2 个圆圈，一个在另一个里面。有必要将内圈的运动限制在外圈的边界内

javascript

2 个回答

  1. Best Answer

    要画圆，你显然有中心O1 (x1, y1)和 的坐标O2 (x2, y2)，以及它们的半径R1和R2。

    想象你的圆心重合。你能把内圈移到一边多远？只要它们的半径不同。这意味着您可以将中心精确地移动这个距离，不能再移动了。

    因此，事实证明，中心之间的距离不应超过R1-R2（或该值的模数）。

    如何计算中心之间的距离，知道它们的坐标？通常，距离公式是已知的。但为了清楚起见，你有两点。通过一个你画一条垂直线。通过第二个- 水平。你得到一个直角三角形，斜边正好连接你的点。
    在这种情况下，勾股定理怎么说？腿长的平方和等于斜边的平方。kaike的腿的长度是多少？第一|x2-x1| 和第二|y2-y1|。

    为了不进一步提取根，将斜边的平方与半径差的平方进行比较。

    (x2-x1)^2 + (y2-y1)^2 <= (r2-r1)^2
    • 2

  2. 在此示例中，我使用了 svg，对于画布，公式是相同的。

    这只是勾股定理：

    // если расстояние от центра меньше разница радиуса внешнего и внутреннего круга 
if (dx*dx + dy*dy < dr*dr)

    而第二个组件稍微复杂一些，我们考虑边界超出边界时的正确位置，这样行为更符合预期，一个圆不会“靠在另一个圆上”。

    // получаем из декартовых координат компонент угла полярных координат
let a = Math.atan2(dy, dx); 

// считаем центр окружности исходя из угла и возможного максимального радиуса
d3.select(this).attr("cx", x - Math.cos(a)*dr)
               .attr("cy", y - Math.sin(a)*dr);

    用鼠标拖动内圈：

    dragCircleInCircle('#drag1', '#bounds1');
dragCircleInCircle('#drag2', '#bounds2', true);

function dragCircleInCircle(dragCircle, boundingCircle, right){

  boundingCircle = d3.select(boundingCircle);
  dragCircle = d3.select(dragCircle).call(d3.drag().on("drag", dragged));
  
  let x = +boundingCircle.attr('cx');
  let y = +boundingCircle.attr('cy');
  let dr = +boundingCircle.attr('r') - dragCircle.attr('r');

  function dragged(d) {
    let dx = x - d3.event.x;
    let dy = y - d3.event.y;
    if (dx*dx + dy*dy < dr*dr)
      d3.select(this).attr("cx", d3.event.x)
                     .attr("cy", d3.event.y);
    else if (right) {
      let a = Math.atan2(dy, dx);
      d3.select(this).attr("cx", x - Math.cos(a)*dr)
                     .attr("cy", y - Math.sin(a)*dr);
    } 
  }
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg viewbox="0 0 200 100" height="90vh">
  <circle id="bounds1" r="40" fill="none" stroke="red" cx="50" cy="50"/>
  <circle id="drag1" r="10" fill="aqua" stroke="blue" cx="50" cy="50"/>
  <circle id="bounds2" r="40" fill="none" stroke="red" cx="150" cy="50"/>
  <circle id="drag2" r="10" fill="aqua" stroke="blue" cx="150" cy="50"/>
</svg>

    • 1

相关问题