如何使用Paper.js判断一个圆形是否包含在另一个圆形内部？

原本以为可以用isInside方法解决这个问题，但实际测试后发现行不通。以下代码可在Paper.js环境运行：

期望Circle2包含在Circle1内部 #

var circle1 = new Path.Circle(new Point(100, 100), 100);
var circle2 = new Path.Circle(new Point(100, 100), 50);

circle1.strokeWidth = 2;
circle1.strokeColor = "black";
circle1.fillColor = "blue";
circle2.strokeWidth = 2;
circle2.strokeColor = "black";
circle2.fillColor = "green";

console.log(circle1.isInside(circle2));
console.log(circle2.isInside(circle1));

输出结果： #

false false

问题原因 #

Paper.js的isInside()方法仅用于判断单个点是否位于路径内部，而非判断一个路径是否完全包含另一个路径。直接传入路径对象调用该方法时，本质是用路径的position属性（默认是路径中心点）作为判断点，因此会得到不符合预期的结果。

正确的判断方法 #

要判断圆B是否完全包含在圆A内部，通过几何关系计算即可：

1. 计算两个圆心之间的距离distance；
2. 验证distance + 圆B半径 ≤ 圆A半径，若成立则说明圆B完全在圆A内部（包含边界相切的情况）。

对应代码实现：

function isCircleInside(outerCircle, innerCircle) {
    var centerDistance = outerCircle.position.getDistance(innerCircle.position);
    return centerDistance + innerCircle.radius <= outerCircle.radius;
}

console.log(isCircleInside(circle1, circle2)); // 输出 true
console.log(isCircleInside(circle2, circle1)); // 输出 false

内容的提问来源于stack exchange，提问作者JasonC