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

一、项目目录

index.html	基本html文件
config.js	配置文件
project2.js	项目js文件，进行绘制的操作都在该文件中
lib	外部js库，包含了webgl的库函数等

二、配置说明

开发环境：PhpStorm

运行环境：谷歌浏览器Chrome74

三、运行说明

将以上文件放置在同一目录下，用谷歌浏览器打开index.html即可运行

四、操作说明

1. 按B键可以切换是否显示边框

2. 按T键可以旋转并缩放图形，再次按下可以暂停

3. 按E键可以进入编辑模式，编辑模式下可以拖动顶点进行重绘（按T之后不可编辑，需要再次按E进入编辑模式）

五、代码结构

函数	作用
main	程序入口函数，当html文件打开时，会运行该函数，函数内部对面板进行了初始化，并且进行事件绑定
initVertexBuffers	初始化缓冲区，将顶点位置以及颜色数据等进行坐标转换，存入缓冲区
keydown	键盘响应事件函数，用于处理用户按下键盘的事件
startRotate	开始旋转与缩放图形函数
stopRotate	停止图形的旋转与缩放
animate	获取当前旋转角度与缩放比例的函数，根据时间进行更新旋转角度与缩放比例
draw	绘制函数，在其中会根据变换矩阵清空面板重新绘制图形
getPoint	根据传入的鼠标点击坐标获取当前点击的顶点下标
isInCanvas	判断当前鼠标的点是否在canvas内部
doMouseDown	鼠标按下时的事件函数
doMouseMove	鼠标移动时的事件函数
doMouseUp	鼠标松开时的事件函数

六、实现逻辑

1. 初始时会设置几个布尔值：

isRotating	是否在旋转	默认false
isNeedShowLine	是否需要展示边框	默认true
canModify	是否可以编辑	默认true

2. 根据初始状态绘制图形，绘制函数会根据是否需要展示边框变量来决定是否画边框

3. 注册事件，等待操作并处理键盘按下与鼠标事件

4. 当按下T时，会判断是否在旋转，如果是则停止旋转，如果不是则开始旋转，并且设置 canModify为false，即不可编辑

5. 当按下B时，会将isNeedShowLine取反，然后根据当前状态绘制图形

6. 当按下E时，如果当前在旋转状态，会停止旋转。然后设置角度与比例恢复成旋转前的图形，并进入可编辑状态

7. 鼠标点击顶点时，会先判断是否是可编辑状态，如果是，则进行鼠标移动事件的处理，如果不是，则忽略鼠标点击

8. 进行拖动编辑时，会获取拖动的顶点下标以及拖动的坐标，每次拖动时，会更改buffer 里面对应顶点的坐标，然后进行重新绘制图形

七、遇到的问题

• 传入全部顶点绘制四边形时无法正确绘制，会造成绘制的三角形进行覆盖经过查看发现是传入顶点顺序问题，所以在程序开始的时候，会读取配置文件并调换每个四边形第一和第二个顶点的位置，之后再存入缓冲区，这样解决了绘制顶点顺序的问题

八、亮点

一个小小的亮点是pj完成之后，经过测试，个人Pj的CPU利用率会比示例程序的CPU利用率小1%到2%

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