【JS图形学基础】平面向量的计算和运用实例

平面向量的计算和运用实例

相关概念

• 有向线段：具有方向的线段叫做有向线段，以A为起点，B为终点的有向线段记作 或AB；
• 向量的模：有向线段AB的长度叫做向量的模，记作|AB|；
• 零向量：长度等于0的向量叫做零向量，记作 或0。（注意粗体格式，实数“0”和向量“0”是有区别的，书写时要在向量“0”上加箭头，以免混淆）；
• 相等向量：长度相等且方向相同的向量叫做相等向量；
• 平行向量（共线向量）：两个方向相同或相反的非零向量叫做平行向量或共线向量，-零向量与任意向量平行，即0//a；
• 单位向量：模等于1个单位长度的向量叫做单位向量，通常用e表示，平行于坐标轴的单位向量习惯上分别用i、j表示。
• 相反向量：与a长度相等，方向相反的向量，叫做a的相反向量，-(-a)=a，零向量的相反向量仍然是零向量。 [1]

几何表示

二维

任取平面上两点A(x1,y1),B(x2,y2),则向量AB=(x2-x1,y2-y1)，即一个向量的坐标等于表示此向量的有向线段的终点坐标减去始点的坐标。

三维

A(x1,y1,z1),B(x2,y2,z2),向量AB=(x2-x1,y2-y1,z2-z1)

基本计算

向量相加

二维

平行四边形定则解决向量加法的方法：将两个向量平移至公共起点，以向量的两条边作平行四边形，向量的加法结果为公共起点的对角线。

向量的点乘:a * b

公式：a b = |a| |b| * cosθ
点乘又叫向量的内积、数量积，是一个向量和它在另一个向量上的投影的长度的乘积；是标量。
点乘反映着两个向量的“相似度”，两个向量越“相似”，它们的点乘越大。

向量的叉乘：a ∧ b

方向：a向量与b向量的向量积的方向与这两个向量所在平面垂直，且遵守右手定则。

右手定则：右手的四指方向指向第一个矢量,屈向叉乘矢量的夹角方向（两个矢量夹角方向取小于180°的方向）,那么此时大拇指方向就是叉乘所得的新的矢量的方向.（大拇指应与食指成九十度）

在二维中，两个向量的向量积的模的绝对值等于由这两天向量组成的平行四边形的面积

二维

(x1,y1)X(x2,y2)=(x1y2-x2y1)

三维

(x1,y1,z1)X(x2,y2,z2)=(y1z2-y2z1, z1x2-z2y1, x1y2-x2y1)

实例运用

//计算向量叉乘    
var crossMul=function(v1,v2){ 
 
    return   v1.x*v2.y-v1.y*v2.x;  
}  
//javascript判断两条线段是否相交    

var checkCross=function(p1,p2,p3,p4){  
  
    var v1={x:p1.x-p3.x,y:p1.y-p3.y};  
          
    v2={x:p2.x-p3.x,y:p2.y-p3.y};  
   
    v3={x:p4.x-p3.x,y:p4.y-p3.y};  
          
    v=crossMul(v1,v3)*crossMul(v2,v3);  
 
    v1={x:p3.x-p1.x,y:p3.y-p1.y};  
      
    v2={x:p4.x-p1.x,y:p4.y-p1.y};  
  
    v3={x:p2.x-p1.x,y:p2.y-p1.y};  
      
    return (v<=0&&crossMul(v1,v3)*crossMul(v2,v3)<=0)?true:false;  
 
}  
//判断点是否在多边形内    
  
var  checkPP=function(point,polygon){  
      
    var p1,p2,p3,p4;  
  
    p1=point;  
      
    p2={x:-100,y:point.y};  
  
    var count=0;  
      
    //对每条边都和射线作对比    
  
    for(var i=0;i<polygon.length-1;i++){  
          
        p3=polygon[i];  
   
        p4=polygon[i+1];  
          
        if(checkCross(p1,p2,p3,p4)==true){  
    
            count++;  
              
        }  
         
    }  
      
    p3=polygon[polygon.length-1];  
    
    p4=polygon[0];  
      
    if(checkCross(p1,p2,p3,p4)==true){  
    
        count++;  
          
    }  
  
    //  console.log(count)    
      
    return (count%2==0)?false:true;  
    
}