欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 健康 > 养生 > PDF 转 HTML5 —— HTML5 填充图形不支持 Even-Odd 奇偶规则?(第一部分)

PDF 转 HTML5 —— HTML5 填充图形不支持 Even-Odd 奇偶规则?(第一部分)

2025/9/23 19:20:33 来源:https://blog.csdn.net/2401_87189539/article/details/148384251  浏览:    关键词: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

 

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词