在特定方向通过 3 个点的弧 [英] arc via 3 points in specific direction

问题描述

我需要从特定方向的 3 个点绘制弧线.

I need to draw the arc from 3 points in specific direction.

假设我有 3 个 vec2 点 P1、P2、P3；

Lets say i have 3 vec2 points P1, P2, P3;

我已经找到圆心了:

circleCenter: function (b, c, d) {
    var temp = Math.pow(c.x, 2) + Math.pow(c.y, 2);
    var bc = (Math.pow(b.x, 2) + Math.pow(b.y, 2) - temp) / 2.;
    var cd = (temp - Math.pow(d.x, 2) - Math.pow(d.y, 2)) / 2.;
    var det = (b.x - c.x) * (c.y - d.y) - (c.x - d.x) * (b.y - c.y);

    if (Math.abs(det) < 1e-14)
        return false;

    var circ = new THREE.Vector2((bc * (c.y - d.y) - cd * (b.y - c.y)) / det,
    ((b.x - c.x) * cd - (c.x - d.x) * bc) / det
    );

    return circ;
},

和半径...

    var startPoint = P1;
    var endPoint = P3;
    var centerPoint = P2;

    var centerPoint = this.circle(startPoint, centerPoint, endPoint);

    var r = Math.sqrt((startPoint.x - centerPoint.x) * (startPoint.x - centerPoint.x) + (startPoint.y - centerPoint.y) * (startPoint.y - centerPoint.y));

第三步是寻找角度，这是我一直卡住的地方.我正在以这种方式计算我拥有的每个点的角度:

third step is finding angles which is the place I've been stuck. I'm calculating angles this way for each of point I have:

angleFromOrigin: function (c, p) {
    var x = p.x - c.x;
    var y = p.y - c.y;
    var theta = (180 / Math.PI * Math.atan2(y, x));
    return theta;
},

但是这种方法没有给我 a) 方向，b) 它并不总是包括第三点(在圆上显示相反的弧)

But this approach does not give me a) direction, b) it does not always include 3rd point (shows opposite arc on the circle)

所以我需要使用旋转方向(顺时针、逆时针)和我需要包含在圆弧中的第 3 个角度来校正我拥有的那些角度.

so I need to correct those angles I have, using rotation direction (clockwise, counterclockwise) and 3rth angle i need to include in arc.

推荐答案

在将一些特定的矢量数据椭圆弧转换为 SVG 时，嘿嘿……

heh was there too while convert some specific vector data elliptic arcs to SVG ...

几乎没有应该这样做.我看到你的情况是这样的:

few if should do it. I see your case like this:

试试这个角度校正:

if (a2-a1>+180.0) a2-=360.0;
if (a2-a1<-180.0) a2+=360.0;
if (a3-a2>+180.0) a3-=360.0;
if (a3-a2<-180.0) a3+=360.0;

然后是简单的方向:

if (a2-a1< 0) dir = CW;
if (a2-a1> 0) dir = CCW;
if (a2-a1==0) dir = none;

唯一的问题是当你的弧线覆盖整个 360 度或更多圈时......

The only problem is when your arc cover whole 360 degree circle or more ...

• 那么这还不够

可以这样画:

for (i=0,a=a1;i<100;i++,a+=(a3-a1)/99.0) // 100 lines per arc or use GDI arc ...
 {
 x=C.x + R*cos(a*PI/180.0);
 y=C.y + R*sin(a*PI/180.0); // or - R*...  if your render device has opposite Y direction
 if (!i) ...->Canvas->MoveTo(x,y);
 else    ...->Canvas->LineTo(x,y);
 }

• R = |P1-C|

这篇关于在特定方向通过 3 个点的弧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！