倒圓半徑計算

Question

我想計算一個倒圓的半徑。

我設法實現了一切，但經過數小時的努力之後，我找不到一個公式來計算正確的反轉半徑。約一圈反轉

更多信息：

• http://en.wikipedia.org/wiki/Inversive_geometry
• https://www.youtube.com/watch?v=sG_6nlMZ8f4

我迄今爲止代碼：http://codepen.io/rafaelcastrocouto/pen/Mwjdga

這似乎是工作，但你可以很容易分辨出它是完全錯誤的。

var c = $('#c'), 
    b = $('body'), 
    canvas = c[0], 
    ctx = canvas.getContext('2d'), 
    pi = Math.PI, 
    r = 100, 
    mr = 30, 
    width, height, hw, hh; 
var setup = function() { 
    width = b.width(); 
    height = b.height(); 
    hw = width/2; 
    hh = height/2; 
    canvas.width = width; 
    canvas.height = height; 
    mid(); 
}; 
var mid = function() { 
    circle(hw,hh,0.25); 
    circle(hw,hh,r); 
} 
var circle = function(x,y,r) { 
    ctx.beginPath(); 
    ctx.arc(x,y,r,0,pi*2); 
    ctx.stroke(); 
    ctx.closePath(); 
}; 
var move = function(evt) { 
    var x = evt.clientX, 
     y = evt.clientY; 
    ctx.clearRect(0,0,width,height); 
    mid(); 
    circle(x,y,mr); 
    var dx = x-hw, 
     dy = y-hh, 
     d = dist(dx,dy), 
     nd = r*r/d, 
     nx = dx*nd/d, 
     ny = dy*nd/d, 
     nr = mr*mr*pi/d; // whats the correct formula? 
    console.log(nr); 
    circle(nx+hw, ny+hh, nr); 
}; 
var dist = function(x,y) { 
    return Math.pow(x*x + y*y, 1/2); 
}; 
$(setup); 
$(window).resize(setup); 
$(window).mousemove(move); 

需要數學專家的幫助！

Answer 1

我的錯誤是，我假設倒圓的中心也遵守OP x OP'= r ，但如下圖所示，它顯然沒有。解決方法是計算圓上的兩個點並反映每個點，然後使用這些點之間的一半距離來查找半徑。

因此，這是正確的代碼：

var c = $('#c'), 
 
     b = $('body'), 
 
     canvas = c[0], 
 
     ctx = canvas.getContext('2d'), 
 
     pi = Math.PI, 
 
     r = 100, 
 
     mr = 30, 
 
     width, height, hw, hh; 
 

 
var setup = function() { 
 
    width = b.width(); 
 
    height = b.height(); 
 
    hw = width/2; 
 
    hh = height/2; 
 
    canvas.width = width; 
 
    canvas.height = height; 
 
    mid(); 
 
}; 
 
var mid = function() { 
 
    circle(hw,hh,0.25); 
 
    circle(hw,hh,r); 
 
} 
 
var circle = function(x,y,r) { 
 
    ctx.beginPath(); 
 
    ctx.arc(x,y,r,0,pi*2); 
 
    ctx.stroke(); 
 
    ctx.closePath(); 
 
}; 
 
var move = function(evt) { 
 
    var x = evt.clientX, 
 
     y = evt.clientY; 
 
    ctx.clearRect(0,0,width,height); 
 
    mid(); 
 
    circle(x,y,mr); 
 
    var dx = x-hw, 
 
     dy = y-hh, 
 
     d = dist(dx,dy), 
 
     d1 = d - mr, 
 
     d2 = d + mr, 
 
     nd1 = r*r/d1, 
 
     nd2 = r*r/d2, 
 
     a = Math.atan2(dy,dx), 
 
     dx1 = Math.cos(a) * nd1, 
 
     dy1 = Math.sin(a) * nd1, 
 
     dx2 = Math.cos(a) * nd2, 
 
     dy2 = Math.sin(a) * nd2, 
 
     nd = dist(dx1 - dx2, dy1 - dy2),  
 
     nr = nd/2, 
 
     cx = dx1 - (Math.cos(a) * nr), 
 
     cy = dy1 - (Math.sin(a) * nr); 
 
    circle(cx+hw, cy+hh, nr); 
 
}; 
 
var dist = function(x,y) { 
 
    return Math.pow(x*x + y*y, 1/2); 
 
}; 
 
$(setup); 
 
$(window).resize(setup); 
 
$(window).mousemove(move);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas id="c"></canvas>