Issue with path subtraction (boolean operation)

ehudhal commented 10 years ago

Creating a rectangle path, and subtracting a specific compound path (svg below) does not provide the expected outcome. This is tested with today's paper.js build from Master.

Repro:

Create a rectangle with rounded shapes. The rectangle size should be equal to the bounding rectangle of the "test" svg.
Subtract "test" svg from the rectangle.

Expected: The result should be identical to the image on the left, only with the cyan shape removed.

Actual: Some of the paths are open / edges missing.

screenshot 2014-03-11 16 32 32

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="js/paper.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            var canvas = document.getElementById('myCanvas');
            paper.setup(canvas);

            var group = paper.project.importSVG(document.getElementById('test'));
            var svgBounds = new paper.Rectangle(group.bounds.topLeft, group.bounds.width, group.bounds.height);
            var rect = new paper.Path.Rectangle(svgBounds); 
            var united = rect.subtract(group.children[0]); //group has one child, a compound path.

            united.selected = true;
            group.bringToFront();
            united.strokeColor = 'navy';
            rect.fillColor = 'purple';
            group.fillColor = 'cyan';
            united.translate([500, 0]);
            paper.view.draw();
        };
    </script>
</head>
<body>
<canvas id="myCanvas" width="1000" height = "1000"></canvas>

<svg id="test" xmlns:svg="http://www.w3.org/2000/svg"
     xmlns="http://www.w3.org/2000/svg"
     version="1.0">
    <path x="0" y="0" d="M346.72412,10L403.03484,10L415.09715,79.90285L485,91.96516L485,148.27588L423.82235,130.46663L435.49981,198.13924L485,220.02627L485,276.33699L445.13648,253.98514L485,485L412.40773,235.63382L362.3229,207.55078L485,485L314.34877,180.65123L10,10L287.44922,132.6771L259.36618,82.59227L10,10L241.01486,49.86352L218.66301,10L274.97373,10L296.86076,59.50019L364.53337,71.17765z M396.46888,180.8813L377.90131,117.09869L314.1187,98.53112L339.36693,155.63307z"></path>
</svg>
</body>
</html>

lehni commented 10 years ago

What version of the library are you using? Nightly build or 0.9.15?

ehudhal commented 10 years ago

I was using 0.9.15. The subtract issue does not repro with the nightly build.

ehudhal commented 10 years ago

Reopening, as this reproes with nightly build when I set cornersize to zero. Updated image to reflect the actual result of the subtract operation.

lehni commented 10 years ago

What do you mean by cornersize?

lehni commented 10 years ago

@hkrish could you look into this?

hkrish commented 10 years ago

See #420 for the explanation

screen shot 2014-03-12 at 13 12 26

Note that, paperjs does not take care of the overlapping curves (curves directly overlapping on each other) as of yet. It is in the list of things to improve. screen shot 2014-03-12 at 13 20 44

While filling a path this should not make any difference, but, the result of course should be different.

hkrish commented 10 years ago

Resolved at https://github.com/paperjs/paper.js/commit/066d47dbf74141b5a5e7921f60d70838cf431956

paperjs / paper.js

Issue with path subtraction (boolean operation) #419