基于JavaScript开发的网页多点绘图程序

资源下载地址：https://download.csdn.net/download/sheziqiong/85907763
资源下载地址：https://download.csdn.net/download/sheziqiong/85907763

1.项目目录：

scanConversion.html html文件，前端显示文件

config.js js文件，本次项目的全部功能全部有其实现

2. 开发环境与运行

开发环境：Chrome浏览器 73.0

运行：确保scanConversion.html和config.js在同一个目录下，用Chrome浏览器打开html文件即可

3.代码结构

4.实现逻辑

4.1 绘制四边形

1. 在drawQuadAll中，判断当前移动的四边形，将移动与未移动的四边形进行分组，优先绘制未移动的四边形，再绘制移动的四边形

2. 根据顺序，依次传入一个四边形顶点数组调用drawQuad函数

3. 使用drawQuad绘制单个四边形时，先获取全部顶点左边，计算该四边形的四条边斜率（事先计算保存，保证绘制一个四边形每条线段只计算一次斜率，提高性能）

4. 判断四边形的四个顶点的最大与最小y坐标，由此确定扫描线的扫描区间（确定区间，无需扫描整个canvas，提升效率）

5. 遍历扫描区间，根据扫描线、线段的斜率等，采用一次函数y=kx+b求出扫描线与四边形四条边的交点，并存入交点数组，扫描过程会维持三个交点数组，分布用于存储本次扫描结果、上次扫描结果、上上次扫描结果。

6. 扫描时如果遇到扫描线与线段重合，直接绘制该线段，并且不返回交点坐标。

7. 本次扫描结束后，会对上次扫描结果进行排序，开始图像绘制，对上次扫描结果进行分类绘制：

   • 两个交点：直接绘制直线

• 三个交点：必有两个交点为同一个点，直接绘制线段：最小交点坐标到最大交点左边

• 四个交点：有主要下图两种情况，所以要根据本次扫描结果以及上上次扫描结果进行判断绘制

  如果本次以及上上次扫描结果交点个数均为2，则是左图情况，则直接绘制线段：交点数组的第一个到第四个交点

  如果前后两次交点个数有一者不为两个，说明是右图情况，则绘制线1-2,3-4；

8. 绘制结束

4.2 绘制手柄：

1. 遍历顶点数组，获取每个顶点的下标，每次调用circle函数，传入一个顶点进行绘制

2. circle函数采用中点画圆算法，对顶点进行绘制

4.3 鼠标事件:

1. 按下鼠标之后启动mousedown事件，获取鼠标坐标，判断左边是否在canvas内且在某个手柄内部。如果符合条件，为鼠标移动绑定事件mousemove

2. 鼠标移动mousemove事件：如果绑定了该事件，鼠标移动时，被选定的手柄会与鼠标坐标同时移动，每移动一次，canvas就会清空画布，根据当前坐标重新绘制四边形与手柄。如果手柄移动到canvas外部，鼠标移动事件将暂时失效

3. 鼠标松开事件mouseup：如果鼠标松开，会最后一次调用mousemove，重新绘制画布，之后解除mousemove事件的绑定

资源下载地址：https://download.csdn.net/download/sheziqiong/85907763
资源下载地址：https://download.csdn.net/download/sheziqiong/85907763