前端小功能: 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

没有终点，没有彼岸，坚持就好，愿岁月如初

前端小功能: canvas网格线

猜你喜欢