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

相关推荐
Haven-36 分钟前
Java-面试八股文-JVM篇
java·jvm·面试
我真的是大笨蛋43 分钟前
JVM调优总结
java·jvm·数据库·redis·缓存·性能优化·系统架构
wjs0401 小时前
Git常用的命令
java·git·gitlab
superlls1 小时前
(算法 哈希表)【LeetCode 349】两个数组的交集 思路笔记自留
java·数据结构·算法
数据知道1 小时前
【系统分析师】第7章-基础知识:软件工程(核心总结)
软件工程·软考高级·系统分析师
小马哥编程2 小时前
软件工程:DO-178中的适航要求核心要素
软件工程
田里的水稻2 小时前
C++_队列编码实例,从末端添加对象,同时把头部的对象剔除掉,中的队列长度为设置长度NUM_OBJ
java·c++·算法
ponnylv2 小时前
深入剖析Spring Boot启动流程
java·开发语言·spring boot·spring
前行的小黑炭2 小时前
Android 协程的使用:结合一个环境噪音检查功能的例子来玩玩
android·java·kotlin
小白电脑技术3 小时前
PDF教程|如何把想要的网页保存下来?
pdf·电脑