跳到主要内容

向量

交互式向量允许用户通过拖动尾部和尖端点来操作数学向量。这对于演示向量概念（如大小、方向和向量运算）很有用。

交互式向量​

具有可拖动尾部（原点）和尖端（箭头）点的向量。拖动任一端点以查看向量属性实时更新。

import { InteractiveVector } from '@wangyaoshen/locus-interaction';

const vector = new InteractiveVector({
  tail: [150, 200],
  tip: [350, 100],
  color: '#FF5722',
  lineWidth: 4,
  arrowSize: 18,
  pointRadius: 10,
  onChange: (tail, tip) => {
    console.log('向量已更改:', tail, tip);
  },
});

向量属性​

向量组件提供了几个计算属性：

const vector = new InteractiveVector({
  tail: [0, 0],
  tip: [100, 100],
});

// 获取大小（长度）
const magnitude = vector.getMagnitude(); // 141.42...

// 获取以弧度为单位的角度
const angle = vector.getAngle(); // 0.785... (45 度)

// 获取方向（单位向量）
const direction = vector.getDirection(); // [0.707..., 0.707...]

// 获取向量分量
const vec = vector.getVector(); // [100, 100]

约束端点​

对尾部或尖端点独立应用约束：

import { InteractiveVector, horizontal, circle } from '@wangyaoshen/locus-interaction';

// 尾部水平移动，尖端自由移动
const vector = new InteractiveVector({
  tail: [100, 200],
  tip: [300, 100],
  constrainTail: horizontal(200),
  onChange: (tail, tip) => {
    console.log('向量:', tail, tip);
  },
});

向量运算​

// 向量加法
const v1 = new InteractiveVector({ tail: [0, 0], tip: [100, 0] });
const v2 = new InteractiveVector({ tail: [0, 0], tip: [0, 100] });

const sum = addVectors(v1.getVector(), v2.getVector()); // [100, 100]

// 向量点积
const dotProduct = dotProduct(v1.getVector(), v2.getVector()); // 0

// 向量叉积（2D）
const crossProduct = crossProduct2D(v1.getVector(), v2.getVector()); // 10000

属性​

属性类型默认值描述
tailVector2[0, 0]尾部位置
tipVector2[100, 100]尖端位置
colorstring'#FF5722'向量颜色
lineWidthnumber4线条宽度
arrowSizenumber18箭头大小
pointRadiusnumber10端点半径
onChange(tail, tip) => void-更改回调