Closed rttll closed 1 week ago
Judging by the <path />
comparisons it looks like Adobe Illustrator clamps or rounds the values. Many of the coordinates have only 1 decimal place whereas the Two.js version are clamped at 4 decimal places. This makes me think it's a precision error.
Have you tried scaling up the object to be more or less whole numbers? This way slight variations won't be lost as much between applications.
Nice work!
Yeah that makes sense, Illustrator is rounding it slightly.
I haven't tried scaling. I think we'd lose accuracy though, since the current shape exactly matches the building we're mapping (original points came out of autocad).
More updates:
Tested the import/export process with the boxy-svg editor, and it maintains the exact points, so that is promising. Also looking to Onshape and other cad software instead of svg editors. So instead of importing/interpreting an svg back in , we'll import updated coordinates. Also looking promising...
Thanks for the quick reply!
You don't have to change the shape it's just a conversion when you export / import. So exporting you'd scale by 1000 and then when importing from Illustrator you'd divide again by 1000.
After trying a few CAD apps, I settled on Boxy SVG. The main issue with CAD was a smooth import / export process. Boxy SVG allows direct editing of the svg w/in the same coordinate space with a 1:1 scale to two.js, and doesn't round any path values. It's working great.
Thanks again for your help @jonobr1
Glad it worked out!
Describe your question
I'm building an indoor mapping system w/ Two.js. It's a refactor of our current map built on Leaflet.js. I need to be able to edit the perimeter of buildings and other features.
Rather than build an ui/editor in Two.js, I want to grab the resulting svg from the browser (via developer tools), edit in a vector editor, and import back into Two.js
Issue is the re-imported svg is not accurate.
Does anyone have a recommendation for vector editor that will keep the exact imported svg path? I'm also open to other solutions for this...
Twojs has been perfect for this project, I just need to solve this last part.
Your code (either pasted here, or a link to a hosted example)
(code just below) Original perimeter, defined as coordinates. Used to build building perimeter w/ Twojs. Originally from cad drawing. Converted to two.js vertices / created two.js Path, works great and accurate.
(code below) Resulting def generated by Twojs. This is all fine and accurate. I pull the entire
I then export the svg out of illustrator (code below). Path exported back out from Adobe illustrator (no changes made). The def is different but that's fine, in theory, as long as the shape is equivalent. But it's slightly off (see screenshot)
note: width /height values here don't come from Illustrator. they come from running getBoundingClientRect(true) on the two.js path. So it gets constrainted back to the original dimensions.
This resulting svg from illustrator is placed back in two.js via
interpret
. I don't manipulate it except height/width is added as mentoned above.As you can see below it's a bit off. Since this is a mapping project, it needs to be exact.
Screenshots
It's really close but slightly off (black: original. red: from illustrator)
Environment (please select one):
If applicable:
Additional context Add any other context about the problem here.