paperjs / paper.js

The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey
http://paperjs.org
Other
14.45k stars 1.22k forks source link

Unite path possible bug? #505

Closed ontic closed 9 years ago

ontic commented 10 years ago

I've been playing around with paper.js the past few weeks and have really come to like it, but I've encountered mixed results when trying to unite paths.

I am trying to create an outline of multiple paths by uniting them, so they'll form a cut contour. The paths I am trying to unite were derived from an SVG font, explaining the problems I've encountered is difficult, so I've uploaded a functional demo to my server.

Demo URL: http://goo.gl/1SPeo1

Test Case 1: Firstname: Adam Font: Lobster Result: The glyphs "d" and "a" are not united

Test Case 2: Firstname: adam Font: Lobster Result: This works perfectly!

Test Case 3: Firstname: Adam Font: Lucida Result: This works perfectly!

Test Case 4: Firstname: Kaitlin Font: Lucida Result: The glyphs "i", "t", "l", "i" and "n" are not united

I'm sure if you try typing other words, you'll discover more problems/inconsistencies. I'd appreciate your assistance in resolving this.

Regards, Adam

ontic commented 10 years ago

If you need any more details or files just let me know. Although you should be able to inspect/copy the source from the link above.

lehni commented 10 years ago

@hkrish I think this is one for you. I am wondering if we should still try and fix the current boolean code a bit more before implementing the new version, e.g. using the improved solve qubic approach?

hkrish commented 10 years ago

I will take a look at this. @lehni We can certainly fix the current code for issues like these. But there are another set of issues we cannot fix, like overlapping paths etc. I will also try to move more functionality to the new cubic solver.

lehni commented 10 years ago

Yes I understand that. I think it'd be good to fix the issues that we started working on already, move to the new solver, so there's less pressure on the work on the new approach. And I'm happy to help with this!

ontic commented 10 years ago

@lehni @hkrish I wasn't sure if the inconsistencies were caused by the fonts I used, how I parsed the font using PHP, or just the way I coded project. It seems like you's are ironing out some bugs in regards to uniting paths, I'll keep a close eye on your commits. I think having a solid API for handling fonts and glyphs in this manner would be a great feature to the library. E.g.

var font = new paper.Font({json|xml}); font.name font.glyphs (array of paper.Glyph instances) font.unitsPerEm font.ascent ...

var text = new paper.PointText(new paper.Point(0, 0)); text.content = 'Some Text'; text.font = font;

var paths = text.toPaths();

I'm more of a PHP developer, but if there's anything I can assist with just let me know. Cheers

lehni commented 10 years ago

Yeah a font API would be lovely and is something we keep planning for the future.

If you could perhaps isolate some simple test-cases from your app that use SVG-style path-data (path#pathData) to illustrate the boolean operations that go wrong, that'd be great!

lehni commented 10 years ago

Oh, and if you'd like to work on the Font API that'd be great! How much do you know about Font formats?

ontic commented 10 years ago

@lehni No worries, I'll strip down my sandbox application so there are no dependencies (jQuery & Bootstrap) and hard code the font information (JSON object) which is currently being produced using PHP. I might have time to do this tonight, once I separate the individual test cases I'll upload them to my server (as well as a .zip file for you guys to download).

I'm happy to have a crack at creating an API for handling fonts, although I'm no expert when it comes to the different formats. But I don't think any of us need to be. Rather than trying to accommodate various formats (TTF, OTF, WOFF, SVG, etc) it would be better to have your own conventions for how font information should be supplied.

Take https://github.com/sorccu/cufon for example, they don't try and render text/glyphs for all types of fonts (which would be difficult using just JavaScript). Instead their website allows users to upload and convert fonts to a format there library is familiar with. You could do something similar using the open source software http://fontforge.org.

"FontForge -- An outline font editor that lets you create your own postscript, truetype, opentype, cid-keyed, multi-master, cff, svg and bitmap (bdf, FON, NFNT) fonts, or edit existing ones."

Using FontForge you're able to convert different types of fonts to various formats, but we really only need the font converted to SVG, from SVG you can then easily convert it JSON or a format you think is best.

What are your thoughts?

ontic commented 10 years ago

Sorry for the delay, my day job has been keeping me busy.

Sandbox: http://adamdyson.com.au/sandbox/index.php Files: http://adamdyson.com.au/sandbox.zip

I'll hopefully get a chance to map out an API for handling fonts over the weekend. Let me know how you get on with this uniting paths issue.

hkrish commented 10 years ago

Thanks @ontic. I would take a look at this soon.

rponudic commented 9 years ago

@ontic Your examples are not anymore online so I can't tell you for sure, but the problem you are describing seems to be quite similar to the one I had. Maybe this will help you out:

https://github.com/paperjs/paper.js/issues/540

ontic commented 9 years ago

@rponudic Unfortunately the issues are unrelated. The shapes (glyphs) I was creating were CompoundPaths which rendered perfectly, the issue/bug I encountered was when I tried to unite certain paths, some united fine but others had unexpected results. Thanks anyway.

@hkrish @lehni Any progress on this issue?

lehni commented 9 years ago

@ontic It'd be good if you could keep your examples alive as long as the bug is not solved.

oayoub84 commented 9 years ago

Hi everybody, i don't know if i had to open issue or just post in this one, because the bug i encountered is aslo related to unite() function, but not with a complex paths as @ontic, just with sample one:

var path = new Path({ segments: [[30, 25], [30, 100], [250, 100], [250, 25]], fillColor: 'red' }); path.closed = true;

var path2 = new Path({ segments: [[200, 25], [200, 100], [300, 100], [300, 25]], fillColor: 'black' }); path2.closed = true;

// Join the paths: var newpath = path.unite(path2); newpath.selected = true;

path.remove(); path2.remove();

This is the result: http://grab.by/BxBa

Excepted result in one big rectangle.

lehni commented 9 years ago

@masix, your issue is the same as #450, not the one described here.

lehni commented 9 years ago

@ontic if you want this looked at, please put your test case up again. Otherwise I will close this bug in a couple of weeks. Thanks.

ontic commented 9 years ago

@lehni Yes I do desperately! I've re-uploaded the test cases and bundled the files in a .zip

https://www.adamdyson.com.au/sandbox.zip

lehni commented 9 years ago

Thanks! Got it now and will turn it into simpler test-cases based on JSON export of the problematic data.

ontic commented 9 years ago

@lehni Ok great! Let me know if I can help in any way.

lehni commented 9 years ago

With all the recent fixes to boolean operations in place, I am happy to announce that all the problems mentioned above are now working as they should!

@hkrish & @iconexperience, that's pretty good news I think! : )