PDF 转 HTML5 —— HTML5 填充图形不支持 Even-Odd 奇偶规则？（第一部分）

在填充 PDF 中的图形时（以及许多其他技术中），你可以选择使用 Even-Odd（奇偶） 或 Non-Zero（非零） 填充规则。

对于那些已经在想“你在说啥？”的朋友，别担心，我马上解释。

一个图形有“内部”和“外部”。对于一个简单的图形来说，判断什么是内部、什么是外部非常简单。但如果你在页面上乱涂乱画，路径多次交叉，最后闭合起来——这时候哪个部分是“内部”？哪个是“外部”？如果你还有嵌套的图形，或者多个图形重叠呢？

我们可以通过 Even-Odd 或 Non-Zero 两种规则来解决这个问题。

Even-Odd（奇偶规则）：

“此规则通过从画布上的某点向任意方向发射一条射线，并统计该射线与图形路径段的交点数量来判断该点是否在图形内部。如果交点数量是奇数，则该点在图形内部；如果是偶数，则在图形外部。”
—— 摘自 W3C SVG 1.1 规范

举个例子：

EvenOddRule
（参考自 W3C SVG 1.1）

Non-Zero（非零规则）：

“此规则通过从画布上的某点向任意方向发射一条射线，并检查图形路径与射线的交点来判断该点是否在图形内部。初始计数为 0，每当路径从左向右穿过射线时加 1，从右向左穿过时减 1。最终的结果如果是 0，该点在图形外部；否则，在图形内部。”
—— 摘自 W3C SVG 1.1 规范

举个例子：

 

NonZeroRule
（参考自 W3C SVG 1.1）

简单来说 —— 使用 Non-Zero 填充规则时，图形绘制的方向会影响填充效果。如果你用 Non-Zero 规则来绘制原本应该使用 Even-Odd 规则的图形，那你就会看到一些本不该被填充的区域被错误地填充了。

而这正是我们在将 PDF 转换为 HTML5 时遇到的问题 —— PDF 支持 Even-Odd 和 Non-Zero 两种规则，而 HTML5（Canvas API）只支持 Non-Zero 规则。

所以我们陷入了一个困境 —— 当我们遇到在 PDF 中使用了 Even-Odd 规则的图形，转换到 HTML5 时该怎么办？

要了解答案，请继续阅读 第二部分 的内容。

 

我们的主页：PDF 转 HTML5、Java 图像库、Java PDF SDK - IDRsolutions