如何使用WebGL实现鼠标方式绘制连续直线段

本文介绍如何使用WebGL实现使用鼠标绘制连续直线段，假定你对JavaScript和WebGL已有一定的了解，这里重点介绍实现的思路。
绘制连续直线动画

功能设计

  1. 鼠标点击屏幕上某个点开启连续线段的第一个点；
  2. 接着移动鼠标，将实时绘制第一个点和鼠标位置之间的直线段，来实时展示线段的位置变化；
  3. 移动鼠标到合适的位置点击鼠标左键，确定此点为线段的第二个点；
  4. 继续跟踪鼠标的移动以选择下一个点，可以连续不断地按此方式绘制下一个连续线段；
  5. 按下Enter或Esc键结束此次连续线段的绘制。

    实现思路

    我们知道gl.drawArrays(int mode, int first, int count)方法的选择不同的mode会产生不同的绘制效果，参见下图可以发现gl.LINE_STRIP模式可以实现绘制连续线段。
    gl.drawArrays不同模式的效果
    首先，监听canvas的鼠标点击事件，将鼠标点击位置的坐标添加到连续线段的坐标点数据中，可以以数组的形式存放；
    接着，立即触发监听鼠标移动事件，实时跟踪鼠标的移动，可以将鼠标的实时坐标存储在变量中，将连续线段坐标点和实时鼠标坐标点组合的点数据传送到WebGL的缓冲区，使用gl.drawArrays的gl.LINE_STRIP模式绘制这些坐标点以达到绘制连续线段的效果；
    另外，还需要触发监听键盘按下事件，如果按下了Enter或Esc键则移除鼠标移动事件和键盘事件的监听，清空坐标点数据，结束本次绘制。
    最后，仅仅通过改变gl.drawArrays的绘制模式还可以实现任意多边形的绘制，有兴趣的话可以自己探索试试。

    代码示例

See the Pen webgl-绘制连续直线段 by pepperpapa (@pepperpapa) on CodePen.

赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

路漫漫其修远兮 吾将上下而求索