路径

以前看 Windows API，GDI 部分的时候就不知道，GDI Region 这一块是怎么实现的。

hRegion1 = CreatePolygonRgn(&points[0], nPoints, ALTERNATE);
hRegion2 = CreateRectRgn(0, 0, 100, 100);
CombineRgn(hDestRgn, hRgn1, hRgn2, RGN_OR);
FillRgn(hDC, hDestRgn, hBrush);
DeleteObject(hRegion1);
DeleteObject(hRegion2);

学了 CAD 后我知道，这是区域布尔操作。但是就是不知道如何在计算机中存储和表示这样的操作源和结果。区域里到底存着什么呢？点集？几何描述？二者各有缺陷。

到今天都不明白。所以现在碰到 Bulletproof 使用的 Pixi 的混乱填充结果就得开始恶补了。

---

此问题中的一些有意思的资源请展开。

webgl-2d

它的使用方式是这样的：

var cvs = document.getElementById("myCanvas");
WebGL2D.enable(cvs); // adds "webgl-2d" context to cvs
var ctx = cvs.getContext("webgl-2d"); // easily switch between "webgl-2d" and "2d" contexts

对，会注册一个 webgl-2d 上下文！

GPU to the Web - Sep. 2012

第31页：

“Stencil” the path object into the stencil buffer

• GPU provides fast stenciling of filled or stroked paths
• Calculate winding rule or containment at every sub-pixel sample in parallel

提出了以后 WebGL 可能自带 winding 计算的可能性。（虽然到现在都没有提供这个接口……）

Clipper

Delphi 实现的一个包含多边形计算的图形库。使用树状结构管理多边形，而且可以判断多边形开闭、采用不同的 winding。

Polyfill

呃，就看看。

Modernizr

居然能检测 canvas winding support……没用过，不知道怎么做的。

Revised Canvas Paths

提出了一些便于调用的接口。对比现在的浏览器支持，绘图部分，Chrome 和 Firefox 现在支持 Path2D。（好像有什么问题……对了这是给 Canvas2D 用的不是给 WebGL 用的。）

填充非凸多边形

提供了一个思路。

---

剪切参考：

• Vatti Clipping Algorithm（Clipper 就是用的此算法，同时这是这篇文章第二次提到 Clipper），论文(1992)
• Greiner-Hormann Clipping Algorithm
• Weiler-Atherton Clipping Algorithm
• Sutherland-Hodgman Algorithm