【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;  
    
}