前端小功能: canvas網格線

前端小功能: canvas網格線

前面用了canvas畫了不規則四邊形，並驗證了碰邊處理，本來四邊形區域已經是有背景的，可是pm說要有網格線背景好看。

canvas畫線就是起點和終點，跟以前畫直線一下，兩點一條直線，關鍵就是每個點的位置，都再條邊上面，而四邊形不是規則四邊形。

思路：

　　1. 獲取不規則四邊形的四個最大很最小的minX，minY，maxX，maxY。

　　2. 畫橫線，minY ++  < maxY ，寬minX-maxX，橫線把個圖形鋪滿。 

　　3. 畫豎線，minX ++  < maxX ，寬minY-maxY，豎線把個圖形鋪滿。

　　4. 判斷橫線和豎線與不規則四邊形交點，一般情況下，線與四邊形只有兩個交點，只有遇對角的時候，會多一個。多沒有關系，去重一下就好。因為對角的時候會有兩個坐標一樣。

　　5. 完成網格線。

循環橫線，豎線與四邊形的交點，去交點畫網格線。

獲取交點：

segmentsIntr(a, b, c, d){
        /** 1 解線性方程組, 求線段交點. **/
        // 如果分母為0 則平行或共線, 不相交
         var denominator = (b.y - a.y)*(d.x - c.x) - (a.x - b.x)*(c.y - d.y);
         if (denominator==0) {
           return false;
         }

        // 線段所在直線的交點坐標 (x , y)
         var x = ( (b.x - a.x) * (d.x - c.x) * (c.y - a.y)
          + (b.y - a.y) * (d.x - c.x) * a.x
          - (d.y - c.y) * (b.x - a.x) * c.x ) / denominator ;
         var y = -( (b.y - a.y) * (d.y - c.y) * (c.x - a.x)
          + (b.x - a.x) * (d.y - c.y) * a.y
          - (d.x - c.x) * (b.y - a.y) * c.y ) / denominator;

        /** 2 判斷交點是否在兩條線段上 **/
         if (
         // 交點在線段1上
         (x - a.x) * (x - b.x) <= 0 && (y - a.y) * (y - b.y) <= 0
         // 且交點也在線段2上
          && (x - c.x) * (x - d.x) <= 0 && (y - c.y) * (y - d.y) <= 0
         ){
         // 返回交點p
         return {
          x : x,
          y : y
          }
         }

         //否則不相交
         return false

},

引用

已知線段1(a,b) 和線段2(c,d) ,其中a b c d為端點, 求線段交點p .(平行或共線視作不相交)

算法一: 求兩條線段所在直線的交點, 再判斷交點是否在兩條線段上.

求直線交點時 我們可通過直線的一般方程 ax+by+c=0 求得(方程中的abc為系數,不是前面提到的端點,另外也可用點斜式方程和斜截式方程,此處暫且不論).

然后根據交點的與線段端點的位置關系來判斷交點是否在線段上.

交點判斷來自：https://www.jb51.net/article/90104.htm

 

沒有終點，沒有彼岸，堅持就好，願歲月如初