canvas的坐标怎么算（Canvas之向量数学）
本文所有知识点均来源于《图形渲染实战 2D架构设计与实现》这本书，作者关于向量数学知识点的讲解是我目前看到的最全面、最容易理解的。这里只是抛砖引玉，感兴趣请阅读书籍
1. 概念向量的定义：向量是具有方向（Direction）和大小（Length / Magnitude）的空间变量。
向量的大小：已知一个向量a = [ x , y ]，那么该向量的大小可以使用|| a ||来表示，其值为一个标量（Scalar），可以由Math.sqrt(x^2 y^2)这个公式计算得出。
2.向量加减法2.1加法
在图6.2中，向量a（实线且大小为200）与向量b（实线且大小为282.84）相加的几何解释就是：平移向量，使向量b的尾部（向量b的圆点部分）连接向量a的头部（向量a箭头部分），接着从向量a的尾部向向量b的头部画一个向量（大小为446.21），该向量就是向量a b形成的新的向量，这就是向量加法的三角形法则。而在图6.2所示的向量加法几何特性图示中，使用的是向量加法的平行四边形法则绘制的。
向量加法很有用。举个例子，在力学中，如果有两个力（向量）同时施加在某个物体上，那么该物体受到的合力就是这两个力（向量）相加。
2.2减法
向量减法的几何含义，如图6.3所示，可以固定任意一个向量，平移另外一个向量，让两个向量的尾部重合，此时如果是：会发现，向量的减法是具有方向性的，并不满足交换律。
- 向量a（实线且大小为200）减去向量b（实线且大小为282.84），则从向量b（实线且大小为282.84）的头部向着向量a（实线且大小为200）的头部画一个新的向量（粗线且大小为200），如图6.3左图所示。[插图]图6.3 向量减法
- 向量b（实线且大小为282.84）减去向量a（实线且大小为200），则从向量a（实线且大小为200）的头部向着向量b（实线且大小为282.84）的头部画一个新的向量（粗线且大小为200），如图6.3右图所示。
向量与标量不能相加，但是它们能相乘。当一个标量和一个向量相乘时，将得到一个新的向量，该向量与原向量平行，但长度不同或方向相反。如图6.5所示，画布中心左侧的向量的方向都是相同的（平行），向量的大小则以每20个单位递增。而画布中心右侧的向量，方向相反（仍旧平行），其大小也是以每20个单位递增。
向量与标量相乘的本质是缩放向量，因此实现的静态方法名为scale。现在大家应该知道标量的英文为什么叫Scalar了，因为标量（Scalar）用来缩放（Scale）向量（Vector）
2.4向量的点乘向量能与标量相乘，向量也能和向量相乘。两个向量相乘被称为点乘（也常称为点积或内积）
两个向量a和b，夹角为θ，根据余弦定律：
|| a - b ||²= || a ||² || b ||²-2 || a || || b || cosθ。
将上述表达式的左侧|| a - b ||²展开，写成|| a ||² || b ||²-2 ( a·b )，则可以得到：
|| a ||² || b ||²-2 ( a·b ) = || a ||2 || b ||2-2 || a || || b || cosθ。
从而就可以导出如下公式：
a·b = || a || || b || cosθ。
根据上面的公式，可以写成如下形式：
cosθ = a·b / ( || a || || b || ) 其中 ( || a || || b || ) 的值总是正数。
由此得到如下重要的信息：
- 当a·b > 0时，向量a和b的夹角θ为锐角（因为0 <= θ < Math . PI / 2的余弦值大于0），可以认为两个向量方向基本相同，如图6.6左侧图示。
- 当a·b = 0时，向量a和b的夹角θ为直角（因为Math . PI / 2的余弦值等于0），可以认为两个向量相互垂直，如图6.6中间所示的图示。
- 当a·b < 0时，向量a和b的夹角θ为钝角（因为Math . PI / 2 < θ <= Math .PI ]的余弦值小于0），可以认为两个向量方向基本相反，如图6.6右侧图示。
- 如果向量a、b中任意一个向量为零向量，则a·b的结果也为0，这意味着零向量和任意其他向量都是相互垂直的。
根据这个公式：cosθ = a·b / ( || a || || b || )，那么能够很容易计算出向量a与向量b之间的夹角，伪代码如下：
// 根据公式：cosθ = a·b / ( || a || || b || )，计算向量a和向量b的夹角
// 根据isRadian参数的取值来判断是返回弧度还是返回角度
public static getAngle(a: Vec2, b: Vec2, isRadian: boolean = false): number {
let dot: number = Vec2.dotProduct(a, b);
let radian: number = Math.acos(dot / (a.length * b.length));
if (isRadian === false) {
radian = Math2D.toDegree(radian);
}
return radian;
}
为了与夹角区分，使用朝向来表示物体的方向。具体代码如下：
// 计算两个向量的连起来与x轴的夹角
public static getOrientation(
from: Vec2,
to: Vec2,
isRadian: boolean = false
): number {
let diff: Vec2 = Vec2.difference(to, from);
let radian = Math.atan2(diff.y, diff.x);
if (isRadian === false) {
radian = Math2D.toDegree(radian);
}
return radian;
}
背景描述：当鼠标指针的位置在向量的区域范围之外（如图6.7所示），则正常显示该向量。但当鼠标指针的位置移动到向量区域范围内，则会加粗显示该向量，并且会：
（1）标记出鼠标指针位置（圆圈表示）、坐标信息，以及线段起点到鼠标指针处的向量。
（2）标记出鼠标指针位置在向量上的投影点（圆圈），坐标信息，以及从投影点到鼠标指针位置之间的向量。
（3）标记出鼠标指针位置与线段起点之间以角度表示的夹角。
（4）所有的坐标信息是相对全局坐标系原点（左上角）的偏移表示。
图6.7和图6.8所示的效果是经典的向量投影算法。简单地说，就是将一个点（鼠标位置表示）投影到由起点和终点所形成的向量上。该算法比较常用，伪代码如下：
/**
* 判断点是否在线上
* @param pt
* @param start
* @param end
* @param closePoint
* @returns
*/
public static projectPointOnLineSegment(
pt: vec2,
start: vec2,
end: vec2,
closePoint: vec2
): boolean {
let v0: vec2 = vec2.create();
let v1: vec2 = vec2.create();
let d: number = 0;
// 向量起点到鼠标位置的方向向量
vec2.difference(pt, start, v0);
// 向量起点到向量终点的方向向量
vec2.difference(end, start, v1);
// 原向量变成单位向量，并返回原向量的长度
d = v1.normalize();
// 将v0投影到v1上,获取投影长度
// v0*v1 = ||v0|| * ||v1|| * cosθ
// v1是单位向量，所有 ||v1|| = 1
// 于是 v0*v1 = ||v0|| * cosθ，也就是v0在v1上的投影长度
let t: number = vec2.dotProduct(v0, v1);
// 如果t < 0，说明鼠标在起始点之外，返回起始点
if (t < 0) {
closePoint.x = start.x;
closePoint.y = start.y;
return false;
} else if (t > d) { // 投影长度 > 线段长度，说明鼠标位置超过线段终点范围
closePoint.x = end.x;
closePoint.y = end.y;
return false;
} else {
// 鼠标点位于线段中间
// 使用scaleAdd计算出相对于全局坐标的坐标偏远信息
// start 起点向量
// v1 * t 投影向量
// start v1（单位向量）*t（标量） 相对于全局坐标的向量
vec2.scaleAdd(start, v1, t, closePoint);
return true;
}
}
为了更好地了解getOrientation（向量朝向）和getAngle（向量夹角）方法之间的区别，参考如图6.10所示的效果，可以知道：
- getOrientation方法内部使用的是Math类的atan2方法，atan2方法返回的总是与x轴正方向向量之间的夹角，其取值范围为[ - Math . PI , Math . PI ]之间。
- getAngle方法内部使用Math类的acos方法，acos方法返回的是两个向量之间的夹角，其返回值的取值范围为[ 0 , Math . PI ]。
- 可以将getOrientation看作绝对方向的表示，能唯一地确定物体的方向。而getAngle返回的是相对方向，由于其取值范围，无法确定角度的旋转方向（是逆时针旋转还是顺时针旋转）。
如果一个点在圆的半径范围之内，则说明发生了碰撞
/**
* 判断坐标是否在圆内部
* @param pt 鼠标坐标
* @param center 圆中心坐标
* @param radius 半径
* @returns
*/
public static isPointInCircle(
pt: vec2,
center: vec2,
radius: number
): boolean {
let diff: vec2 = vec2.difference(pt, center);
let len2: number = diff.squaredLength;
// 避免使用Math.sqrt方法
if (len2 <= radius * radius) {
return true;
}
return false;
}
点与线段的碰撞检测是一个比较基础和重要的算法，该算法可以由两部分组成：
- 用projectPointOnLineSegment方法确定一个点是否在一条线段的表示区间，并且返该点的投影点，前面实现了该方法。
- 再调用isPointInCircle方法，该方法判断一个点是否和一个圆发生碰撞。
/**
* 判断坐标是否在线附近
* @param pt 鼠标位置
* @param start 线段起始点
* @param end 线段终止点
* @param radius 碰撞半径
* @returns
*/
public static isPointOnLineSegment(
pt: vec2,
start: vec2,
end: vec2,
radius: number = 2
): boolean {
let closePt: vec2 = vec2.create();
if (Math2D.projectPointOnLineSegment(pt, start, end, closePt) === false) {
return false;
}
return Math2D.isPointInCircle(pt, closePt, radius);
}
关于点与矩形的碰撞检测算法非常简单
/**
* 判断坐标是否在矩形内部
* @param ptX 鼠标位置
* @param ptY 鼠标位置
* @param x 矩形左上角
* @param y 矩形左上角
* @param w 矩形宽度
* @param h 矩形高度
* @returns
*/
public static isPointInRect(
ptX: number,
ptY: number,
x: number,
y: number,
w: number,
h: number
): boolean {
if (ptX >= x && ptX <= x w && ptY >= y && ptY <= y h) {
return true;
}
return false;
}
假设椭圆的中心点定义的坐标值为[ centerX，centerY ]，并且半径分别为[ radiusX , radiusY ]，在这种情况下，一个点P ( pX ,pY )如果在椭圆的内部，那么要满足如下公式：
有了上述公式，就可以实现isPointInEllipse方法。
/**
* 判断坐标是否在椭圆内部
* @param ptX
* @param ptY
* @param centerX
* @param centerY
* @param radiusX
* @param radiusY
* @returns
*/
public static isPointInEllipse(
ptX: number,
ptY: number,
centerX: number,
centerY: number,
radiusX: number,
radiusY: number
): boolean {
let diffX = ptX - centerX;
let diffY = ptY - centerY;
let n: number =
(diffX * diffX) / (radiusX * radiusX)
(diffY * diffY) / (radiusY * radiusY);
return n <= 1.0;
}
如图6.11所示为点与三角形的关系，从图中可以知道，点P与[ v0 , v1 , v2 ]形成的三角形之间的关系有两种，要么点P在三角形内部，要么点P在三角形的外部。
来观察一下它们之间的区别，你会发现：
- 如果点P在[ v0 , v1, v2 ]形成的三角形内部，那么三角形的三个顶点和P形成的三个子三角形[ v0 , v1 , p ]、[ v1 , v2 , p ]和[ v2 , v0 , p]的顶点顺序都是按照顺时针排列的。
- 如果点P在[ v0 , v1, v2 ]形成的三角形外部，那么三角形的三个顶点和P形成的三个子三角形[ v0 , v1 , p ]、[ v1 , v2 , p ]和[ v2 , v0 , p]的顶点顺序总有一个不是按照顺时针顺序排列的，例如图6.11右侧图像中，[ v2 , v0 , p ]形成的子三角形是非顺时针（逆时针）排列的。
- 更加通用的算法描述是，如果点P与[ v0 , v1 , v2 ]形成的三个子三角形的顶点排列顺序一致，那么该点P肯定在[ v0 , v1 , v2 ]形成的三角形的内部，否则该点P就在三角形的外部。
向量叉乘比较特别，只能使用3D向量，现在假设有两个3D向量 a=[x0,y0, z0]和b=[x1, y1, z1]，那么
为了将2D向量vec2以3D向量的形式来表示，可以将3D向量的z分量设置为0，例如a=[x0, y0,0], b=[x1, y1,0]，套用上述叉积公式，会得到：
可以看到，对于2D向量的叉积来说，其x和y分量总是为0，但是对于点与三角形碰撞检测算法来说，叉积后的z分量x0y1-y0x1才是最关键的，先把z分量的计算作为vec2的一个静态方法。
/**
* 计算三角形两条边向量的叉乘
* @param v0
* @param v1
* @param v2
* @returns
*/
public static sign(v0: vec2, v1: vec2, v2: vec2): number {
// v2->v0边向量
let e1: vec2 = vec2.difference(v0, v2);
// v2->v1边向量
let e2: vec2 = vec2.difference(v1, v2);
return vec2.crossProduct(e1, e2);
}
/**
* 判断鼠标是否在三角形内部
* @param pt
* @param v0
* @param v1
* @param v2
* @returns
*/
public static isPointInTriangle(pt: vec2, v0: vec2, v1: vec2, v2: vec2) {
// 计算三角形的三个定点与鼠标形成的三个子三角形的边向量的叉乘
let b1: boolean = Math2D.sign(v0, v1, pt) < 0.0;
let b2: boolean = Math2D.sign(v1, v2, pt) < 0.0;
let b3: boolean = Math2D.sign(v2, v0, pt) < 0.0;
// 三个三角形的方向一致，说明点在三角形内部
// 否则点在三角形外部
return b1 === b2 && b2 === b3;
}
通过上面的代码，结合上图6.11会发现，实际上并不关心子三角形两条边向量叉积的数值大小，更关心的是叉积的正负性，只要三个子三角形的两条边向量的叉积的正负性都一致的话，表示三个子三角形的顶点排列顺序一致，那么该点P肯定在[v0 , v1 , v2 ]形成的三角形的内部，否则肯定在外部。
3.3.5点与任意凸多边形的碰撞检测如图6.12所示，可以将任意的凸多边形很方便地分解成三角形，然后依次调用上一节实现的点与三角形碰撞检测算法，这样就能获得点与任意凸多边形碰撞检测的算法。
/**
* 判断坐标是否在凸多边形内部
* @param pt
* @param points
* @returns
*/
public static isPointInPolygon(pt: vec2, points: vec2[]): boolean {
if (points.length < 3) {
return false;
}
// 以point[0]为共享点，遍历多边形点集，构成三角形，判断点是否在三角形内部,
// 一旦点与某个三角形发生碰撞，就返回true
for (let i: number = 2; i < points.length; i ) {
if (Math2D.isPointInTriangle(pt, points[0], points[i - 1], points[i])) {
return true;
}
}
return false;
}
参考图6.13会发现，左侧的凸多边形（六边形）顶点形成的6个子三角形分别是[ v0, v1 , v2 ]、[ v1 , v2 , v3 ]、[ v2 , v3 , v4 ]、[ v3 , v4 , v5 ]、[ v4 , v5 , v0 ]和[v5 , v0 , v1 ]，这6个子三角形顶点的顺序都是顺时针排列的。
而观察上图右侧的凹多边形，由5个顶点组成，形成的5个子三角形分别是[ v0 , v1, v2 ]、[ v1 , v2 , v3 ]、[ v2 , v3 , v4 ]、[ v3 , v4 , v0 ]和[ v4 , v0 , v1 ]，会发现最后一个三角形[ v4 , v0 , v1]的顶点顺序是逆时针排列，而其他的三角形都是顺时针排列。
如何判断一个三角形的顶点顺序，已经在上一节中了解过了，那么直接来看一下判断凸多边形的算法。
/**
* 判断是否凸多边形
* @param points
* @returns
*/
public static isConvex(points: vec2[]): boolean {
// 算出第一个三角形的定点顺序
let sign: boolean = Math2D.sign(points[0], points[1], points[2]) < 0;
let j: number, k: number;
for (let i: number = 1; i < points.length; i ) {
j = (i 1) % points.length;
k = (i 2) % points.length;
// 如果当前多边形的顶点顺序和第一个多边形的顶点顺序不一致，则说明是凹边形
if (sign !== Math2D.sign(points[i], points[j], points[k]) < 0) {
return false;
}
}
// 凸多边形
return true;
}
向量是具有大小和方向的空间变量。而以前常用的数值都是标量，其仅有大小，而没有方向。在向量一节中，知道了如何计算向量的大小、向量的方向、向量的加减法、负向量、向量的缩放，以及向量的点乘。同时更加详细地解释了向量的上述这些操作相对应的几何含义，这是本文的关键点。只有深刻地理解向量的几何含义，才能灵活地应用向量来解决问题。
核心关注点与基本几何形体之间的碰撞检测算法，涉及点与线段、点与圆、点与矩形、点与椭圆、点与三角形，以及点与凸多边形之间的碰撞检测，并且讲解了多边形的三角形化，以及如何判断凸多边形的算法。
,免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
