2017-09-04 1 views
0

Ich habe JavaScript PDFKit Bower-Paket verwendet, SVG zu PDF zu rendern. Alle Dinge funktionieren gut, aber Schatteneffekt wird nicht gerendert.Ist es möglich, mit pdfkit Schatteneffekte zu rendern?

SVG-Code (von fabricjs gerendert)

<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> 

Gibt es jemanden, der Erfahrung haben Schatten Rendering als pdf-Datei zu erzeugen? Vielen Dank für einen Kommentar.

UPDATE:

Javascript-Code:

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(); 

Antwort

0

Es gibt keine Schatten in svg, noch svg in pdf ausdrücklich unterstützt. Ich sehe Sie verwenden Fabricjs, um das SVG zu generieren. Fabric verwendet Filter (Weichzeichnen und Versatz), um einen Schatteneffekt zu emulieren.

Was SVGtoPDF wahrscheinlich tut, ist das Parsen der Pfade und das Zeichnen der gleichen Befehls in der PS-Sprache für pdf. Ich denke, Filter werden überhaupt nicht unterstützt.

0

Ich habe gerade Schatten hinzugefügt, indem ich Schattenbilder manuell hinzugefügt habe. Dies ist Bilderzeugungscode.

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); 
    }); 
    } 
}); 
Verwandte Themen