0

I'm looking for the equation to convert a circle to an ellipse so that I can find the shortest distance from a point to an ellipse border. I have found the equation for the distance between a circle and a point but cant figure out how to convert it to work with a ellipse.

px and py are the points and x and y are the circle origin and ray is the radius

closestCirclePoint: function(px, py, x, y, ray) {
    var tg = (x += ray, y += ray, 0);
    return function(x, y, x0, y0) {
        return Math.sqrt((x -= x0) * x + (y -= y0) * y);
    }(px, py, x, y) > ray
      ? {x: Math.cos(tg = Math.atan2(py - y, px - x)) * ray + x,
         y: Math.sin(tg) * ray + y}
      : {x: px, y: py};
}
4

1 回答 1

2

[补充回答：如何逼近椭圆上的最近点]

如果你愿意为了实用而牺牲完美……</p>

这是一种计算与目标点“接近”的椭圆点的方法。

在此处输入图像描述

方法：

  • 确定目标点位于椭圆的哪个象限。
  • 计算该象限的开始和结束弧度角。
  • 沿该椭圆象限计算点（“走椭圆”）。
  • 对于每个计算的椭圆点，计算到目标点的距离。
  • 保存到目标距离最短的椭圆点。

缺点：

  • 结果是近似的。
  • 它没有数学上完美的计算那么优雅——使用蛮力方法。
  • （但一种有效的蛮力方法）。

优点：

  • 近似的结果非常好。
  • 性能相当不错。
  • 计算要简单得多。
  • 计算（可能）比数学上完美的计算更快。
  • （花费大约 20 次三角计算加上一些加法/减法）
  • 如果您需要更高的准确性，您只需更改 1 个变量
  • （当然，更高的准确性需要更多的计算）

性能说明：

  • 您可以预先计算椭圆上的所有“步行点”以获得更好的性能。

这是此方法的代码：

    // calc a point on the ellipse that is "near-ish" the target point
    // uses "brute force"
    function getEllipsePt(targetPtX,targetPtY){

        // calculate which ellipse quadrant the targetPt is in
        var q;
        if(targetPtX>cx){
            q=(targetPtY>cy)?0:3;
        }else{
            q=(targetPtY>cy)?1:2;
        }

        // calc beginning and ending radian angles to check
        var r1=q*halfPI;
        var r2=(q+1)*halfPI;
        var dr=halfPI/steps;
        var minLengthSquared=200000000;
        var minX,minY;

        // walk the ellipse quadrant and find a near-point
        for(var r=r1;r<r2;r+=dr){

            // get a point on the ellipse at radian angle == r
            var ellipseX=cx+radiusX*Math.cos(r);
            var ellipseY=cy+radiusY*Math.sin(r);

            // calc distance from ellipsePt to targetPt
            var dx=targetPtX-ellipseX;
            var dy=targetPtY-ellipseY;
            var lengthSquared=dx*dx+dy*dy;

            // if new length is shortest, save this ellipse point
            if(lengthSquared<minLengthSquared){
                minX=ellipseX;
                minY=ellipseY;
                minLengthSquared=lengthSquared;
            }
        }

        return({x:minX,y:minY});
    }

这是代码和小提琴：http: //jsfiddle.net/m1erickson/UDBkV/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:20px; }
    #wrapper{
        position:relative;
        width:300px;
        height:300px;
    }
    #canvas{
        position:absolute; top:0px; left:0px;
        border:1px solid green;
        width:100%;
        height:100%;
    }
    #canvas2{
        position:absolute; top:0px; left:0px;
        border:1px solid red;
        width:100%;
        height:100%;
    }
</style>

<script>
$(function(){

    // get canvas references
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var canvas2=document.getElementById("canvas2");
    var ctx2=canvas2.getContext("2d");

    // calc canvas position on page
    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;


    // define the ellipse
    var cx=150;
    var cy=150;
    var radiusX=50;
    var radiusY=25;
    var halfPI=Math.PI/2;
    var steps=8; // larger == greater accuracy


    // get mouse position
    // calc a point on the ellipse that is "near-ish"
    // display a line between the mouse and that ellipse point
    function handleMouseMove(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mousemove stuff here
      var pt=getEllipsePt(mouseX,mouseY);

      // testing: draw results
      drawResults(mouseX,mouseY,pt.x,pt.y);
    }


    // calc a point on the ellipse that is "near-ish" the target point
    // uses "brute force"
    function getEllipsePt(targetPtX,targetPtY){

        // calculate which ellipse quadrant the targetPt is in
        var q;
        if(targetPtX>cx){
            q=(targetPtY>cy)?0:3;
        }else{
            q=(targetPtY>cy)?1:2;
        }

        // calc beginning and ending radian angles to check
        var r1=q*halfPI;
        var r2=(q+1)*halfPI;
        var dr=halfPI/steps;
        var minLengthSquared=200000000;
        var minX,minY;

        // walk the ellipse quadrant and find a near-point
        for(var r=r1;r<r2;r+=dr){

            // get a point on the ellipse at radian angle == r
            var ellipseX=cx+radiusX*Math.cos(r);
            var ellipseY=cy+radiusY*Math.sin(r);

            // calc distance from ellipsePt to targetPt
            var dx=targetPtX-ellipseX;
            var dy=targetPtY-ellipseY;
            var lengthSquared=dx*dx+dy*dy;

            // if new length is shortest, save this ellipse point
            if(lengthSquared<minLengthSquared){
                minX=ellipseX;
                minY=ellipseY;
                minLengthSquared=lengthSquared;
            }
        }

        return({x:minX,y:minY});
    }

    // listen for mousemoves
    $("#canvas").mousemove(function(e){handleMouseMove(e);});



    // testing: draw the ellipse on the background canvas
    function drawEllipse(){
        ctx2.beginPath()
        ctx2.moveTo(cx+radiusX,cy)
        for(var r=0;r<2*Math.PI;r+=2*Math.PI/60){
            var ellipseX=cx+radiusX*Math.cos(r);
            var ellipseY=cy+radiusY*Math.sin(r);
            ctx2.lineTo(ellipseX,ellipseY)
        }
        ctx2.closePath();
        ctx2.lineWidth=5;
        ctx2.stroke();
    }

    // testing: draw line from mouse to ellipse
    function drawResults(mouseX,mouseY,ellipseX,ellipseY){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.beginPath();
        ctx.moveTo(mouseX,mouseY);
        ctx.lineTo(ellipseX,ellipseY);
        ctx.lineWidth=1;
        ctx.strokeStyle="red";
        ctx.stroke();
    }


}); // end $(function(){});
</script>

</head>

<body>
    <div id="wrapper">
        <canvas id="canvas2" width=300 height=300></canvas>
        <canvas id="canvas" width=300 height=300></canvas>
    </div>
</body>
</html>

原始答案

以下是圆和椭圆的关系

对于水平对齐的椭圆：

在此处输入图像描述

(x x) / (a a) + (y y) / (b b) == 1；

其中a是到水平顶点b的长度， 是到垂直顶点的长度。

圆和椭圆的关系：

如果a==b，椭圆是圆！

然而...！

计算椭圆上任意点到点的最小距离比计算圆要多得多。

这是计算的链接（单击 DistancePointEllipseEllipsoid.cpp）：

http://www.geometrictools.com/SampleMathematics/DistancePointEllipseEllipsoid/DistancePointEllipseEllipsoid.html

于 2013-08-21T16:52:04.087 回答