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

相关推荐
Vertira3 分钟前
pdf 合并 python实现(已解决)
前端·python·pdf
不良手残7 分钟前
IDEA类和方法注释模板设置-保姆教程
java·开发语言
GoodStudyAndDayDayUp12 分钟前
调用海康API预览视频
java·海康
李迟18 分钟前
在Linux服务器上使用kvm创建虚拟机
java·linux·服务器
Dcs18 分钟前
6 个 PWA 高阶策略,助你提升用户留存与参与度
java
hdsoft_huge23 分钟前
Spring Boot 高并发框架实现方案:数字城市的奇妙之旅
java·spring boot·后端
就改了1 小时前
JUC小册——公平锁和非公平锁
java·开发语言
ThetaarSofVenice1 小时前
垃圾收集相关算法Test
java·jvm·算法
秉承初心1 小时前
将Maven依赖上传到Gitee Packages并让他人引用方案(AI)
java·gitee·maven
深栈解码1 小时前
JUC并发编程 synchronized与锁升级
java·后端