AS3:沿两个圆的公共切线绘制一条直线

时间:2012-08-20 07:54:17

标签: actionscript-3 math geometry

我有什么 是舞台上的两个圆圈,circ1和circ2。 circ1的半径为60,circ2的半径为30。

播放时,

circ2可以在舞台上拖动。

我想要什么 是两条线通过它们共同的外切线连接圆圈。这是为了将旧海报变成互动式娱乐箱。这是一个link to the poster,它可以帮助你理解我的意思(虽然现在我只是担心自己的两个圈子。)

问题: 我理解如何用笔和纸找到常见的切线,但是当我试图想到如何将这个用于Flash可能会理解的术语时,我的大脑就会陷入崩溃。我不知道如何使用ActionScript实现这一点。

我尝试了什么: 我环顾四周,this is the closest thing I can find到我想要实现的目标(示例应用程序可以在页面底部下载)。唯一的区别是这包括内部切线,我不需要。

不幸的是,这个源代码是用Java编写的,尽管我付出了最大的努力,但我还是不了解它是否足以移植到AS3。

到目前为止,我自己设法实现的是为每个圆的中心定义点,然后意识到我不能使闪存求解变量的方程。然后我花了几个小时谷歌搜索试图找出如何从这里开始。

非常感谢任何帮助,这是本周末到期的学校项目的工作。我可能已经咬过的东西比我在这里可以咀嚼的多,但现在回头已经太晚了。

提前致谢!

2 个答案:

答案 0 :(得分:2)

这是一个可以为两个圆圈描述的工作代码 - 假设两个圆圈大小相同。否则它是近似值,因为它假定切点将在垂直于连接圆心的线上。

var point1 : Point = new Point(100, 100);
var point2 : Point = new Point(300, 50);
var radius1 : int = 60;
var radius2 : int = 30;

// if you draw a line from the first circle origo to
// the second origo, this is the angle of that line
var ang : Number = Math.atan2(point2.y - point1.y, point2.x - point1.x);

// find the first point on the circumference that is orthogonal
// to the line intersecting the two circle origos
var start1 : Point = new Point(point1.x + Math.cos(ang + Math.PI / 2) * radius1, 
                               point1.y + Math.sin(ang + Math.PI/2)* radius1);
var end1 : Point = new Point(point2.x + Math.cos(ang + Math.PI / 2) * radius2, 
                             point2.y + Math.sin(ang + Math.PI/2)* radius2);

// find the second point on the circumference that is orthogonal
// to the line intersecting the two circle origos
var start2 : Point = new Point(point1.x + Math.cos(ang - Math.PI / 2) * radius1, 
                               point1.y + Math.sin(ang - Math.PI/2)* radius1);
var end2 : Point = new Point(point2.x + Math.cos(ang - Math.PI / 2) * radius2,
                             point2.y + Math.sin(ang - Math.PI/2)* radius2);

// draw everything on the stage
this.graphics.lineStyle(1, 0x0);
this.graphics.drawCircle(point1.x, point1.y, radius1);
this.graphics.drawCircle(point2.x, point2.y, radius2);

this.graphics.moveTo(start1.x, start1.y);
this.graphics.lineTo(end1.x, end1.y);

this.graphics.moveTo(start2.x, start2.y);
this.graphics.lineTo(end2.x, end2.y);

答案 1 :(得分:2)

function DrawTangents(p1 : Point, r1 : Number, p2 : Point, r2 : Number) : void {
    var dx = p2.x - p1.x;
    var dy = p2.y - p1.y;
    var dist = Math.sqrt(dx*dx + dy*dy);

    this.graphics.drawCircle(p1.x, p1.y, r1);
    this.graphics.drawCircle(p2.x, p2.y, r2);

    if (dist <= Math.abs(r2 - r1)) {
        // The circles are coinciding. There are no valid tangents.
        return;
    }

    // Rotation from the x-axis.
    var angle1 = Math.atan2(dy, dx);

    // Relative angle of the normals. This is equal for both circles.
    var angle2 = Math.acos((r1 - r2)/dist);

    this.graphics.moveTo(p1.x + r1 * Math.cos(angle1 + angle2),
                         p1.y + r1 * Math.sin(angle1 + angle2));
    this.graphics.lineTo(p2.x + r2 * Math.cos(angle1 + angle2),
                         p2.y + r2 * Math.sin(angle1 + angle2));

    this.graphics.moveTo(p1.x + r1 * Math.cos(angle1 - angle2),
                         p1.y + r1 * Math.sin(angle1 - angle2));
    this.graphics.lineTo(p2.x + r2 * Math.cos(angle1 - angle2),
                         p2.y + r2 * Math.sin(angle1 - angle2));
}