如何在jsPDF中使用剪辑方法？

Question

我想使用如下所示的 jsPDF 将线设置为剪裁区域。

所以，我调用了类似 blew 的方法。我在调用 .lines() 后调用了 .clip()，样式参数为 null，如下所示。

var doc = new jsPDF();
doc.lines([[50, 0], [0, 50], [-50, 0], [0, -50]], 20, 20, [1.0, 1.0], null, true); // horizontal line
doc.clip();
doc.rect(50, 50, 100, 100, 'F');

我剪线成功了！

但是我不能使剪辑区域超过一个。

Answer 1

他们最近确实修复了这个问题，但显然不想破坏现有的 API，因此他们添加了一个名为 clip_fixed:
的新方法 https://github.com/MrRio/jsPDF/commit/e32f0a2b222a940b0f228457371a118fc138ec28#diff-8162ee9f6251a2016741ffe67239c3c4

一旦您使用 null 样式对象绘制了您的剪辑路径并调用了 doc.clip_fixed()，您随后绘制的所有形状都将被剪辑到您当前的剪辑路径。

如果之后您需要在不应用裁剪的情况下绘制另一个形状，您会发现没有像doc.unclip() 。因此，稍后绘制未裁剪形状的最佳选择是在绘制裁剪路径之前先将当前状态保存到图形状态堆栈，并且在绘制完最后一个裁剪形状后，从堆栈中恢复之前的状态。不幸的是，此堆栈的 API 尚未通过 jsPDF 公开，但您可以通过 doc.internal.write() 访问 jsPDF 的内部命令队列，以插入任何 jsPDF 未处理的 PDF 命令。

因此，要创建可逆剪裁，您需要执行以下操作：

doc.internal.write('q'); // saves the currrent state // any draw command with a style value of null doc.clip_fixed(); // any number of draw commands with strokes, fills, or null for compound paths doc.internal.write('Q'); // restores the state to where there was no clipping

关于剪裁的进一步阅读：
http://www.verypdf.com/document/pdf-format-reference/pg_0234.htm

如何在jsPDF中使用剪辑方法？

How to use clip method in jsPDF?

javascript

pdf

jspdf