'How to clip paths in JsPdf

I'm trying to create a felling of complex shapes using the .path() method.

The form is drawn. This is the result from Adobe Illustrator. But a strange glitch appears: another empty shape is also drawn without a fill. In the picture: I dragged it to the left. Result in Adobe Illustrator

I found a solution for simple rectangle() or circle() shapes with zero style: jspdf: how to clip region/shapes? But I did not find a solution for complex forms.


        let lines = []

        // Star
        lines[0] = [
            {op: 'm', c: [x + 0.63 * w, y + 0.162 * h]},
            {op: 'c', c: [x + 0.63 * w, y + 0.162 * h, x + 0.681 * w, y + 0.334 * h, x + 0.681 * w, y + 0.334 * h]},
            {op: 'c', c: [x + 0.681 * w, y + 0.334 * h, x + 0.845 * w, y + 0.334 * h, x + 0.845 * w, y + 0.334 * h]},
            {op: 'c', c: [x + 0.845 * w, y + 0.334 * h, x + 0.712 * w, y + 0.44 * h, x + 0.712 * w, y + 0.44 * h]},
            {op: 'c', c: [x + 0.712 * w, y + 0.44 * h, x + 0.763 * w, y + 0.612 * h, x + 0.763 * w, y + 0.612 * h]},
            {op: 'c', c: [x + 0.763 * w, y + 0.612 * h, x + 0.63 * w, y + 0.506 * h, x + 0.63 * w, y + 0.506 * h]},
            {op: 'c', c: [x + 0.63 * w, y + 0.506 * h, x + 0.498 * w, y + 0.612 * h, x + 0.498 * w, y + 0.612 * h]},
            {op: 'c', c: [x + 0.498 * w, y + 0.612 * h, x + 0.549 * w, y + 0.44 * h, x + 0.549 * w, y + 0.44 * h]},
            {op: 'c', c: [x + 0.549 * w, y + 0.44 * h, x + 0.416 * w, y + 0.334 * h, x + 0.416 * w, y + 0.334 * h]},
            {op: 'c', c: [x + 0.416 * w, y + 0.334 * h, x + 0.58 * w, y + 0.334 * h, x + 0.58 * w, y + 0.334 * h]},
            {op: 'c', c: [x + 0.58 * w, y + 0.334 * h, x + 0.63 * w, y + 0.162 * h, x + 0.63 * w, y + 0.162 * h]},
            {op: 'h'},
        ]

        // Hexagon
        lines[1] = [
            {op: 'm', c: [x + 0.675 * w, y]},
            {op: 'c', c: [x + 0.675 * w, y, x + 0.325 * w, y, x + 0.325 * w, y]},
            {op: 'c', c: [x + 0.271 * w, y, x + 0.222 * w, y + 0.032 * h, x + 0.195 * w, y + 0.083 * h]},
            {op: 'c', c: [x + 0.195 * w, y + 0.083 * h, x + 0.02 * w, y + 0.417 * h, x + 0.02 * w, y + 0.417 * h]},
            {op: 'c', c: [x + -0.007 * w, y + 0.468 * h, x + -0.007 * w, y + 0.532 * h, x + 0.02 * w, y + 0.583 * h]},
            {op: 'c', c: [x + 0.02 * w, y + 0.583 * h, x + 0.195 * w, y + 0.917 * h, x + 0.195 * w, y + 0.917 * h]},
            {op: 'c', c: [x + 0.222 * w, y + 0.968 * h, x + 0.271 * w, y + h, x + 0.325 * w, y + h]},
            {op: 'c', c: [x + 0.325 * w, y + h, x + 0.675 * w, y + h, x + 0.675 * w, y + h]},
            {op: 'c', c: [x + 0.729 * w, y + h, x + 0.778 * w, y + 0.968 * h, x + 0.805 * w, y + 0.917 * h]},
            {op: 'c', c: [x + 0.805 * w, y + 0.917 * h, x + 0.98 * w, y + 0.583 * h, x + 0.98 * w, y + 0.583 * h]},
            {op: 'c', c: [x + 1.007 * w, y + 0.532 * h, x + 1.007 * w, y + 0.468 * h, x + 0.98 * w, y + 0.417 * h]},
            {op: 'c', c: [x + 0.98 * w, y + 0.417 * h, x + 0.805 * w, y + 0.083 * h, x + 0.805 * w, y + 0.083 * h]},
            {op: 'c', c: [x + 0.778 * w, y + 0.032 * h, x + 0.729 * w, y, x + 0.675 * w, y]},
            {op: 'h'},
        ]

        doc.saveGraphicsState()
        doc.path(lines[0])
        doc.clip()
        doc.path(lines[1]).fill()
        doc.restoreGraphicsState()


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source