向量
概念
向量(英语:euclidean vector,物理、工程等也称作 矢量 、 欧几里得向量 )是 数学 、 物理学 和 工程科学 等多个 自然科学 中的基本概念。
表示
在可视化中,我们通常使用代数来表示向量。
代数表示指在指定了一个坐标系之后,用一个向量在该坐标系下的坐标来表示该向量,兼具了符号的抽象性和几何形象性,因而具有最高的实用性,被广泛采用于需要定量分析的情形。 对于自由向量,将向量的起点平移到坐标原点后,向量就可以用一个 坐标系 下的一个点来表示,该点的 坐标值 即向量的终点坐标。
那幺很简单的是,我们可以直接用AB来表示这条线段,那幺我们还可以用点+向量的形式来表示这条线段,如上图AB就可以表示为A+
=B,或者也可以表示为B+
=A,都是可以的。
定义
在笛卡尔坐标系中,定义一个 Vector2d
来表示向量
export default class Vector2d { /** * 定义向量 * @param x * @param y */ constructor(x: number, y: number) { this.x = x; this.y = y; } // 复制向量 copy() { return new Vector2d(this.x, this.y); } // 向量相加 add(v) { this.x += v.x; this.y += v.y; return this; } // 向量相减 sub(v) { this.x -= v.x; this.y -= v.y; return this; } // 向量伸缩 scale(a) { this.x *= a; this.y *= a; return this; } // 转化为笛卡尔坐标系 toPoint(): [number, number] { const { x, y } = this; return [x, y]; } // 向量旋转 rotate(rad) { const c = Math.cos(rad), s = Math.sin(rad); const x = this.x; const y = this.y; this.x = x * c + y * -s; this.y = x * s + y * c; return this; } }
加减法
向量的运算遵循平行四边形法则
加减法就非常形象,一张图搞定:
, ,
我们可以这样理解:因为OA AC,那幺向量OA与OB的和就可以视为O先移动到A,再从A移动到C,所以向量OA与OB的和就是OC。其他两个式子同理。
同样可以用坐标表示出来:
加法:a+b=(x1+x2,y1+y2),减法:a-b=(x1-x2,y1-y2)。
而在我们的代码中,就可以使用如下的方式
// y轴默认是向下,可以使用scale(1, -1)向上翻转 ctx.scale(1, -1); const OA = new Vector2d(30, 60); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(...OA.toPoint()); ctx.stroke(); const OB = new Vector2d(60, 30); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(...OB.toPoint()); ctx.stroke(); const OC = OA.copy().add(OB); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(...OC.toPoint()); ctx.stroke();
向量的旋转
对于向量 =(x1,y1),如果我们将其逆时针旋转 ,那幺旋转后的向量 的坐标怎幺表示呢?见下图:
我们令向量OA的模长为L,那幺x1= ,y1= ,x2= ,y2= 。
因为 ,所以x2= ,展开可得 ,y2同理。
向量绘制基础图形
矩形
多边形
曲线
树
其他图形
参考文献:
Be First to Comment