08 | 如何利用三角剖分和向量操作描述并处理多边形？

精选留言(5)

• 

  gltjk

  在之前代码的基础上封装了 Canvas 类和自己的 Vector2D 类，同时增加简单的 WebGL 类（其中封装了用 Tesser2 三角剖分实现的画多边形方法），然后试了试小试牛刀里要求的椭圆、正五角星和菱形星星。因为文件比较多，不用 Codepen 了，改用 Github 放代码。
  之后有时间再把判断点在多边形内部做出来，同时把之前 Codepen 的例子迁移过来。
  话说感觉 WebGL 好深奥啊，可能我连门都没算入吧……
  
  在线预览：https://g.gltjk.com/learn-visualization/canvas-webgl-polygon/
  
  代码仓库：https://github.com/gltjk/learn-visualization

  作者回复: 赞👍能动手自己做非常棒，多实践可以快速学习成长。webgl上手不太容易，不过掌握了学习诀窍，打好基础，后面就越来越容易了，而且会觉得越来越有趣

  2020-07-09

  

   7
• 

  孙华

  月影大佬
  WebGL fill 的例子中
  修改一下 gl.drawElements 的渲染模式，将 gl.TRIANGLES 改成 gl.LINE_STRIP。这样，我们就可以清晰地看出，经过 Earcut 处理的这个多边形被分割成了 8 个三角形。
  但例子展示的结果中只有6个三角形和一个四边形。这是什么原因？

  作者回复: 因为LINE_STRIP是绘制连续线段，所以最终每个点只经过一次，就会出现四边形。不过这里只是大概地显示出三角形形状，所以没关系。如果要严格显示出各个三角形，需要改一下数据，把每个顶点和它的三角形的其他顶点对应的边数据重新存一下然后用LINES绘制

  2020-07-24

  

   1
• 

  kylin

  月影老师，您好，请问三角形向量a b c三个点A B C有没有对应关系，而且a b c 的方向在图上也没有，看不明白您说的如何判断一个点在三角形内

  作者回复: 有的，向量abc就是点p和ABC连接的线段表示向量

  2020-08-01

   1

  
• 

  Mingzhang

  关于判断一个点是否在三角形内（包括边上）我曾经用代数方法做过：对每一条边而言其对应的顶点必然与要判定的点在同一侧，因此需要进行三组测试。判定函数如下：
  /**
   * Determine whether p3 and p4 are on the same side of the segment of p1-p2
   * @param p1
   * @param p2
   * @param p3
   * @param p4
   * returns -1 (not on the same side) | 0 (at least one is on the segment) | 1 (on the same side)
   */
  function onSameSide(p1=[0,0], p2=[0,0], p3=[0,0], p4=[0,0]) {
    let angle0 = Math.atan2(p2[1] - p1[1], p2[0] - p1[0]);
    let angle1 = Math.atan2(p3[1] - p1[1], p3[0] - p1[0]);
    let angle2 = Math.atan2(p4[1] - p1[1], p4[0] - p1[0]);
    let product = (angle1 - angle0) * (angle2 - angle0);
    if (product === 0) {
      return 0;
    }
    return product > 0 ? 1 : -1;
  }
  

  作者回复: 嗯，算atan很消耗性能

  2020-07-27

   1

  
• 

  Presbyter🎱

  老师，没脸的问一句。自己已经要疯了，很多数学概念已经不明白了。现在在恶补线性代数，然后在回来看文章。老师能麻烦一下，给出咱们这个课程所需要的数学知识嘛？我好一次性都看了，然后一点一点的在重新读咱们文章。麻烦老师了。

  作者回复: 在第9讲的最后我放了一张图，列出了所有的知识点，你可以看一下

  2020-07-14

  

  