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

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

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

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

具体实现的算法还需要先判断点是否在多边形外接框矩形内，可以加速

简单根据老师给的延伸连结解释一下三角剖分 1. 任相邻的两个三角形一定是组成一个四边形，不会是五边形，六边形 2. 任一三角形的外包圆不可包含其他三角形的顶点 3. 跟 Voronoi diagram 是一体两面的概念，三角剖分中的三角形的边的中垂线相连会成为 Voronoi diagram 中的每个多边型，三角剖分中的顶点称为 Voronoi generators

话说浏览器的api判断是否在路径内应该也是用的数学方法吧(｀･ω･´)ゞ

关于判断一个点是否在三角形内（包括边上）我曾经用代数方法做过：对每一条边而言其对应的顶点必然与要判定的点在同一侧，因此需要进行三组测试。判定函数如下： /** * 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; }

老师，判断 u1 是否在 a 上，是否可以用 |a - u1| > 0 判断，大于 0 时，u1 不在 a 上，等于 0 时在 a 上。

github上的代码 怎么打开都是大白屏

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