是否可以使用 pdfkit 渲染阴影效果？

Question

我使用 javascript pdfkit bower 包将 SVG 渲染为 PDF。一切正常，但阴影效果未渲染。

SVG 代码（从 fabricjs 渲染）

<filter id="SVGID_32" y="-22%" height="144%" x="-21%" width="142%" >
    <feGaussianBlur in="SourceAlpha" stdDeviation="1"></feGaussianBlur>
    <feOffset dx="-2" dy="0" result="oBlur" ></feOffset>
    <feFlood flood-color="rgba(0,0,0,1)"/>
    <feComposite in2="oBlur" operator="in" />
    <feMerge>
        <feMergeNode></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
</filter>
    <g transform="translate(588.56 1434.18) scale(1.06 1.06)" style="filter: url(#SVGID_32);">
        <text xml:space="preserve" font-family="us101" font-size="93.33333333333334" font-style="italic" font-weight="400" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(236,236,236); fill-rule: nonzero; opacity: 1; white-space: pre;" >
            <tspan x="-378.71" y="29.32" >AAAAA</tspan>
        </text>
    </g>

有没有人有生成pdf文件时渲染阴影的经验？非常感谢任何评论。

更新：

javascript代码：

doc = new PDFDocument({
    layout: 'landscape',
    size: [docHeight, docWidth]
});
setTimeout(function() {
    var fd = new FormData();
    var div = document.createElement('div');
    div.innerHTML = '<svg ' + canvas.fabric.toSVG().split('<svg ')[1];
    var element = div.firstChild;
    SVGtoPDF(doc, element, 0, 0, { useCSS: true });
    stream = doc.pipe(blobStream());       
    stream.on('finish', function() {
        var blob = stream.toBlob('application/pdf');

        fd.append("pdfimage", blob);
        $.ajax({
            ...
        });
    });
doc.end();

Answer 1

svg 中没有阴影，pdf 中也没有明确支持 svg。我看到您正在使用 fabricjs 生成 SVG。 Fabric 使用滤镜（模糊和偏移）来模拟阴影效果。

SVGtoPDF 可能做的是解析路径并在 pdf 的 ps 语言中绘制相同的命令。我认为根本不支持过滤器。

Answer 2

我只是通过手动添加阴影图片来添加阴影。这是图片生成代码。

canvas._objects.forEach(function(obj, index){
  if(obj.shadow && obj.type == 'i-text'){
    objForm = obj.toObject();
    var Duplicated_obj = new fabric.IText(objForm.text, objForm);
    Duplicated_obj.fill = "rgba('50,50,50,0.8')";
    fabric.util.loadImage(Duplicated_obj.toDataURL({format:'png'}),function(image){
       var object = new fabric.Image(image);
       object.name = 'shadowImage???';
       object.left = obj.left;
       object.top = obj.top;
       canvas.insertAt(object,index-1);
    });
  }
});

是否可以使用 pdfkit 渲染阴影效果？

Is it possible to render shadow effect using pdfkit?

javascript

svg

shadow

pdfkit

fabricjs