椭圆

交互式椭圆将圆形概念扩展为支持不同的水平和垂直半径。在 Locus 中，椭圆是使用具有不同宽度和高度值的 Circle 组件创建的。

创建椭圆

椭圆只是一个具有不同宽度和高度尺寸的圆形：

import { Circle } from '@wangyaoshen/locus-2d';

// 创建宽度=200、高度=100 的椭圆
<Circle
  width={200}
  height={100}
  fill="rgba(33, 150, 243, 0.3)"
  stroke="#2196F3"
  lineWidth={3}
/>

交互式椭圆

使用具有不同尺寸的 InteractiveCircle 来创建可拖动的椭圆：

import { InteractiveCircle } from '@wangyaoshen/locus-2d';
import { Vector2 } from '@wangyaoshen/locus-core';

<InteractiveCircle
  width={200}
  height={100}
  fill="rgba(156, 39, 176, 0.3)"
  stroke="#9C27B0"
  lineWidth={3}
  position={new Vector2(0, 0)}
  interactive={true}
  onMove={(pos) => console.log('椭圆中心:', pos)}
/>

椭圆属性

属性	描述
width	水平直径（如果宽度 > 高度，则为 2 × 长半轴）
height	垂直直径（如果宽度 > 高度，则为 2 × 短半轴）
position	椭圆的中心点
fill	填充颜色
stroke	描边颜色

用例

轨道可视化

// 创建椭圆轨道路径
<Circle
  width={400}
  height={200}
  stroke="#4CAF50"
  lineWidth={2}
  fill="transparent"
/>

// 在轨道上添加可拖动点
<InteractiveCircle
  size={20}
  fill="#FF5722"
  position={new Vector2(200, 0)}
  constrain={ellipse([0, 0], 200, 100)}
  interactive={true}
/>

带焦点的椭圆

// 对于具有半轴 a 和 b 的椭圆：
// c = sqrt(a² - b²)，其中 a > b
const a = 200; // 长半轴
const b = 100; // 短半轴
const c = Math.sqrt(a * a - b * b);

// 焦点位于 (-c, 0) 和 (c, 0)
const focus1 = [-c, 0];
const focus2 = [c, 0];

约束到椭圆

使用 ellipse 约束将点保持在椭圆路径上：

import { InteractivePoint, ellipse } from '@wangyaoshen/locus-interaction';

const point = new InteractivePoint({
  position: [200, 0],
  // 约束到以原点为中心、半轴为 200、100 的椭圆
  constrain: ellipse([0, 0], 200, 100),
  onMove: (pos) => {
    const angle = Math.atan2(pos[1] / 100, pos[0] / 200);
    console.log('椭圆上的角度:', angle);
  },
});

椭圆与圆形

方面	圆形	椭圆
半径	相等 (r)	不同 (a, b)
方程	x² + y² = r²	x²/a² + y²/b² = 1
焦点	一个（中心）	两个（沿长轴）
离心率	0	0 < e < 1

数学属性

对于具有长半轴 a 和短半轴 b 的椭圆：

// 离心率
const eccentricity = Math.sqrt(1 - (b * b) / (a * a));

// 焦距到中心的距离
const focalDistance = Math.sqrt(a * a - b * b);

// 椭圆上角度 θ 处的点
const pointOnEllipse = (theta) => [
  a * Math.cos(theta),
  b * Math.sin(theta),
];

// 周长（近似值）
const perimeter = Math.PI * (3 * (a + b) - Math.sqrt((3 * a + b) * (a + 3 * b)));

// 面积
const area = Math.PI * a * b;