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

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

对于那些已经在想"你在说啥?"的朋友,别担心,我马上解释。

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

我们可以通过 Even-OddNon-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-OddNon-Zero 两种规则,而 HTML5(Canvas API)只支持 Non-Zero 规则。

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

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

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

相关推荐
还是鼠鼠25 分钟前
tlias智能学习辅助系统--Maven 高级-私服介绍与资源上传下载
java·spring boot·后端·spring·maven
Xiaokai丶1 小时前
Java 8 新特性深度剖析:核心要点与代码实战
java
灵魂猎手1 小时前
3. MyBatis Executor:SQL 执行的核心引擎
java·后端·源码
Galaxy在掘金1 小时前
从业8年,谈谈我认知的后端架构之路-1
java·架构
努力努力再努力wz1 小时前
【c++深入系列】:万字详解模版(下)
java·c++·redis
瓦特what?3 小时前
关于C++的#include的超超超详细讲解
java·开发语言·数据结构·c++·算法·信息可视化·数据挖掘
是乐谷3 小时前
阿里云杭州 AI 产品法务岗位信息分享(2025 年 8 月)
java·人工智能·阿里云·面试·职场和发展·机器人·云计算
Java水解4 小时前
Java中的四种引用类型详解:强引用、软引用、弱引用和虚引用
java·后端
lifallen4 小时前
JCTools 无锁并发队列基础:ConcurrentCircularArrayQueue
java·开发语言·数据结构·算法
一叶飘零_sweeeet4 小时前
IDEA 插件 Trae AI 全攻略
java·人工智能·intellij-idea