Adjust baseline position to configured angle

Open M393 opened this issue 4 years ago • 1 comments

This adjusts the baseline according to the configured angle, see #3330

Dec 08 '21 09:12 M393

This does not solve the multiline problem and it still is broken with alignments other than left (though arguably less). Matrix transforms may need to be handled differently, but I didn't test it because unfortunatly I don't have the time to look deeper. After: jspdf-fix-after Before: jspdf-fix-before

Test code

<html>
    <head>
        <meta charset="utf-8">
        <title>PDF Test</title>
        <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script> -->
        <script src="lib/jsPDF/jspdf.umd.js"></script>
    </head>
    <body>
        <button id="btn">Create PDF</button>
        <script>
            (function () {
                let url;
                function testPdf() {
                    if (url) {
                        URL.revokeObjectURL(url);
                    }
                    const pageSize = [ 100, 100 ];
                    const doc = new jspdf.jsPDF({
                        orientation: 'landscape',
                        unit: 'mm',
                        format: pageSize,
                    });

                    const pad = 20;

                    doc.setFillColor('yellow');
                    doc.rect(pad, pad, pageSize[0] - 2 * pad, pageSize[1] - 2 * pad, 'F');

                    doc.text(['TOP'],    pageSize[0] / 2,   pad,               { angle: 0,   baseline: 'bottom', align: 'left' });
                    doc.text(['RIGHT'],  pageSize[0] - pad, pageSize[1] / 2,   { angle: 270, baseline: 'bottom', align: 'left' });
                    doc.text(['BOTTOM'], pageSize[0] / 2,   pageSize[1] - pad, { angle: 180, baseline: 'bottom', align: 'left' });
                    doc.text(['LEFT'],   pad,               pageSize[1] / 2,   { angle: 90,  baseline: 'bottom', align: 'left' });

                    doc.text(['CORNER'], pad,               pad,               { angle: 45,  baseline: 'bottom', align: 'left' });
                    doc.text(['CORNER'], pageSize[0] - pad, pad,               { angle: 315, baseline: 'bottom', align: 'left' });
                    doc.text(['CORNER'], pad,               pageSize[1] - pad, { angle: 135, baseline: 'bottom', align: 'left' });
                    doc.text(['CORNER'], pageSize[0] - pad, pageSize[1] - pad, { angle: 225, baseline: 'bottom', align: 'left' });

                    const blob = doc.output('blob');
                    url = URL.createObjectURL(blob);
                    window.open(url);
                }
                document.querySelector('#btn').addEventListener('click', testPdf);
            })();
        </script>
    </body>
</html>

Dec 09 '21 10:12 M393