将圆转换为椭圆，以便计算点与椭圆边界的距离 [英] Converting a Circle to Ellipse so it calculates the Distance of a Point from an Ellipse Border
本文介绍了将圆转换为椭圆，以便计算点与椭圆边界的距离的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在寻找将圆转换为椭圆的方程，这样我就可以找到从一点到椭圆边界的最短距离。我已经找到了圆和点之间的距离的公式，但想不出如何将其转换为椭圆。
px和py是点，x和y是圆原点，射线是半径
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};
}
推荐答案
[添加到答案：如何逼近椭圆上最近的点]
如果您愿意牺牲完美来换取实用性，…
这里有一种方法可以计算出与目标点"接近"的椭圆点。
方法：
- 确定目标点位于椭圆的哪个象限。
- 计算该象限的起点和终点弧度。
- 沿椭圆象限计算点("漫游椭圆")。
- 对于每个计算的椭圆点，计算到目标点的距离。
- 保存到目标距离最短的椭圆点。
缺点：
- 结果是近似值。
- 它没有数学上完美的计算那么优雅--使用了一种蛮力方法。
- (但这是一种有效的暴力方法)。
优点：
- 近似结果相当好。
- 性能相当不错。
- 计算要简单得多。
- 计算(可能)比数学上完美的计算更快。
- (约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>
原始答案
以下是圆和椭圆的关联
对于水平对齐的椭圆：
(xx)/(aa)+(yy)/(bb)==1；
其中a是水平顶点的长度，b是垂直顶点的长度。
圆圈和椭圆的关系：
如果a==b，则椭圆是圆！
但是...！
计算椭圆上任意点到某点的最小距离比计算圆要多。
这里有一个计算链接(点击DistancePointEllipseEllipsoid.cpp)：
这篇关于将圆转换为椭圆，以便计算点与椭圆边界的距离的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
