如何用两点绘制/形成圆圈？

Question

我需要绘制一个圆圈，我只有两个点。现在我需要找到圆心的中心点和半径？你可以按顺时针方向形成圆圈。

提前致谢

Answer 1

这是解决问题的蛮力方法。

修改

如果两点之间的直线几乎是直线x（意味着半径接近Infinity），则添加最大迭代限制以切断计算

同样是动画，因为这会让一切变得更好：）

＆＃13;

＆＃13;

var canvas = document.body.appendChild(document.createElement("canvas"));
var ctx = canvas.getContext("2d");
canvas.width = 1000;
canvas.height = 1000;
var points = [
    { x: parseInt(prompt("x1", "110")), y: parseInt(prompt("y1", "120")), r: 5 },
    { x: parseInt(prompt("x2", "110")), y: parseInt(prompt("y2", "60")), r: 5 },
];
function calculateRemainingPoint(points, x, precision, maxIteration) {
    if (x === void 0) { x = 0; }
    if (precision === void 0) { precision = 0.001; }
    if (maxIteration === void 0) { maxIteration = 100000; }
    var newPoint = {
        x: x,
        y: (points[0].y + points[1].y) / 2,
        r: 50
    };
    var d0 = distance(points[0].x, points[0].y, x, newPoint.y);
    var d1 = distance(points[1].x, points[1].y, x, newPoint.y);
    var iteration = 0;
    //Bruteforce approach
    while (Math.abs(d0 - d1) > precision && iteration < maxIteration) {
        var oldDiff = Math.abs(d0 - d1);
        var oldY = newPoint.y;
        iteration++;
        newPoint.y += oldDiff / 10;
        d0 = distance(points[0].x, points[0].y, x, newPoint.y);
        d1 = distance(points[1].x, points[1].y, x, newPoint.y);
        var diff_1 = Math.abs(d0 - d1);
        if (diff_1 > oldDiff) {
            newPoint.y = oldY - oldDiff / 10;
            d0 = distance(points[0].x, points[0].y, x, newPoint.y);
            d1 = distance(points[1].x, points[1].y, x, newPoint.y);
        }
    }
    var diff = (points[0].x + points[1].x) / points[0].x;
    newPoint.r = d0;
    return newPoint;
}
points.push(calculateRemainingPoint(points));
function distance(x1, y1, x2, y2) {
    var a = x1 - x2;
    var b = y1 - y2;
    return Math.sqrt(a * a + b * b);
}
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.moveTo(-canvas.width, canvas.height / 2);
    ctx.lineTo(canvas.width, canvas.height / 2);
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.moveTo(canvas.width / 2, -canvas.height);
    ctx.lineTo(canvas.width / 2, canvas.height);
    ctx.stroke();
    ctx.closePath();
    for (var pointIndex = 0; pointIndex < points.length; pointIndex++) {
        var point = points[pointIndex];
        ctx.beginPath();
        ctx.arc(point.x + canvas.width / 2, canvas.height / 2 - point.y, point.r, 0, Math.PI * 2);
        ctx.arc(point.x + canvas.width / 2, canvas.height / 2 - point.y, 2, 0, Math.PI * 2);
        ctx.stroke();
        ctx.closePath();
    }
}
setInterval(function () {
    points = points.slice(0, 2);
    points[Math.floor(Math.random() * points.length) % points.length][Math.random() > 0.5 ? 'x' : 'y'] = Math.random() * canvas.width - canvas.width / 2;
    setTimeout(function () {
        points.push(calculateRemainingPoint(points));
        requestAnimationFrame(draw);
    }, 1000 / 60);
}, 1000);
draw();

＆＃13;

＆＃13;

＆＃13;

Answer 2

不，这是不可能的。

在中心点A + B处创建两个半径相同的圆。在这两个圆的交点处创建一个半径相同的圆....

然后用另一个半径做同样的事情......