interactive drawing and saving

[Ged Wed]

i am wishing to make a drawing package with paper.js specific for engineering.

i dont knwo if some of this is true or not from my searches on line, so can someone let me know if some of these things work, are planned etc.

i can add the missing features and push to the git tree.

1. Can you interactively draw with paper js ?

2. Dimensions and labels ?

3. snapping and guides ?

4. Saving as a dataset ?

thanks

ged

[Tranek]

1) Yes you can. See http://draw.etherpad.org for an example!

4) You can export to JSON or SVG.

[Ged Wed]

i had a look at this.

Please correct me if i am wrong .

1. But interactive i means being able to edit something after you have drawn it. I can select the "Draw tool", to highlight the spline points, but cant edit them at all.

2. No concept of real world scale. Hence not ability to develop tools for doing dimensioning ?

3. No ability to reference the existing objects when drawing or moving an object ?

4. Its not saving the data so it can be edited latter. Its exporting is at a SVG or PNG. Useless for edtting latter. 

Ged

--
You received this message because you are subscribed to a topic in the Google Groups "Paper.js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/paperjs/PhgKfN1lc7A/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to paperjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
Contact details:
+49 1573 693 8595 (germany)
+46 73 364 67 96 (sweden)
skype: gedw99

[Tranek]

Followup on #1 and 4 (I can't comment on 2 and 3):

1) We haven't implemented editing paths yet :) Check out how Chattr does it: http://chatttr.com/ (click the draw tab, draw a spline, then click one of the select mouse cursors to edit the points).

4) If you reload the same url (for example http://draw.etherpad.org/d/testing), all edits are saved. We save edits as JSON on the server. You can open up your browser's console and type in "paper.project.exportJSON();" to see how it looks. We don't provide exporting JSON functionality for users since we're not really doing an engineering type thing, users probably don't need it.

[Tranek]

Also, exporting to SVG is not useless as you can also import SVGs into a new paper project and resume editing.

[Ged Wed]

Hey Tranel,

thansk mate.

Yes i see it all working for both examples you gave me. Yes they both work ! This looks like i can build on top of this library.

DO you know if paper has any concept of real world scale though ? I ask this because i am an architect / It guy and i want to mae a system for drawing 2d engineering drawings.

I also need to reference the underlying 2d snapshot from the 3d CAD drawings. I use SVG to export from the 3d CAD software projection.

Hope you now what i asking, and really appreciate you help. 

Ged

[Tranek]

I have no idea about real world scale and don't want to lead you awry with false answers. Hopefully someone else with more experience with Paper.js can give you a better answer. Sorry!

[Colin Kingsbury]

Ged,

I am working on something very similar, more for mechanical than architectural drawing, but they're really quite similar--you draw in meters, I draw in milimeters ;)

AFAICT after evaluating Raphael, Fabric, and several other libraries for both Canvas and SVG I feel that Paper is the best for this purpose. I think it should be possible to make "real world" units work. I'm still figuring a lot of basics out, but it seems like Paper has the concepts of a world coordinate system (i.e. "a line 123 cubits long") separate from the onscreen canvas/viewport. If I draw a circle with a radius of 30 centered at 150,150 and tell paper to zoom in on it, it gets larger on screen but if I track the mouse coordinates paper gives me for actions, it still shows up as centered at 150,150 and has a radius of 30. So I think it is possible to implement something like CAD in this. My code is still very early and messy so I'd rather not share it yet but as it gets a little more mature it might make sense for us to see whether we have things worth sharing.

[Colin Kingsbury]

Also, just to be clear, as I understand, Paper has a coordinate system that is absolute, but it doesn't understand inches vs. mm vs. parsecs, it just has a floating-point (I think?) value for each x/y coordinate. So any understanding of real-world units would have to be added on top, but this shouldn't be a big issue since you're generally going to want the whole drawing to be in one measure system. If I want to support American architectural/woodworking stuff this will be much more of a pain since machinists prefer 87.625" while carpenters often prefer 7' 3-5/8". I'm assuming you'll only have to deal with metric ;)

[Jürg Lehni]

Hey there.

Yes, Ged it is correct about the units. We don't have any support internally for units at this point, but that doesn't mean you cannot add them. Vector graphics are unit-less and scalable in nature, the units are only provided by the context (e.g. how big is the document that we're looking at).

According to this website, 1 meter for example is 3779.527559055 pixels:

http://www.unitconversion.org/unit_converter/typography.html

Note that this is a convention. Without a DPI information, there is no clear way of mapping one to the other. I assume the above value results from using the default 72DPI, which is outdated and does not actually apply to any screen anymore these days.

Ignoring this, JavaScript allows you to add methods to the Number prototype, so you could do things like the code below, and they would all convert to the internal, unit-less form which is in pixels, in their respective ratios that you'll have to decide on (Applications like Adobe Illustrator do the exact same thing):

Number.prototype.meters = function() {
return this / 3779.527559055;
}

Number.prototype.millimiters = function() {
return this / 3.779527559055;
}

(10).meters()

(0.5).millimiters()

The parenthesis are necessary because JavaScript interprets the period as the beginning of the fractional digits otherwise.

This is just one way you could accomplish this. You could also define them as globals and call it like this.

meters(10)

millimiters(0.5)

Best,

Jürg

> You received this message because you are subscribed to the Google Groups "Paper.js" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to paperjs+u...@googlegroups.com.

[Jürg Lehni]

PS: I am glad that you came to this conclusion. Our focus is exactly in this area among others, and it's great to hear people start using Paper.js in this way.

J

[Ged Wed]

hey All,

Thanks for the many responses. Its fantastic to have so much support.

Jürg 

I am wondering if its worth putting this notion of Paper size (e.g A4, etc), and Projection Scale formally into Paper.js.

Only because its such a fundamental thing that layering it on top of the library will make it very brittle perhaps.

Also because it seams that a few people are thinking of using this aspect also.

My workflow is that i create Camera views in the 3D Model, and output that projection as an SVG.

Then i would import that SVG into Paper.js based 2D CAD and lay the SVG as a view port onto the A4 virtual paper, and then choose what scale i want the SVG view port to be.

When i draw dimensions, it would assume the scale of the dimensions based on the viewport that i am createi the dimensions for.

---

Also, i have not seen any functionality to snap to other geometry. Is this doable in paper.js

Ged

--
You received this message because you are subscribed to a topic in the Google Groups "Paper.js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/paperjs/PhgKfN1lc7A/unsubscribe?hl=en.

To unsubscribe from this group and all its topics, send an email to paperjs+u...@googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out.

[Colin Kingsbury]

On Monday, May 13, 2013 5:33:50 PM UTC-4, Ged Wed wrote:

I am wondering if its worth putting this notion of Paper size (e.g A4, etc), and Projection Scale formally into Paper.js.

Only because its such a fundamental thing that layering it on top of the library will make it very brittle perhaps.

Also because it seams that a few people are thinking of using this aspect also.

If you need to have high quality and consistently-sized print output then you'll want to export to PDF. That's the only format that has any chance of guaranteeing that what comes off the printer will look anything like the PDF file, especially if you want to do accurate scaling (i.e. 1cm = 1m).

 

My workflow is that i create Camera views in the 3D Model, and output that projection as an SVG.

Then i would import that SVG into Paper.js based 2D CAD and lay the SVG as a view port onto the A4 virtual paper, and then choose what scale i want the SVG view port to be.

If you can get the output into SVG, why not use that directly? For that matter, why are you doing this outside of the CAD application? Most 3D CAD applications I've used allow you to create dimensioned 2D views from selected planes/slices of 3D parts as a native feature, with the added benefit that the views update automatically when you edit the part. I suppose you have a good reason and maybe I don't need to know it, but it's unclear.

 

When i draw dimensions, it would assume the scale of the dimensions based on the viewport that i am createi the dimensions for.

Not sure I understand. If you have a line in SVG that is 100 units and that is imported into Paper as a path that is 100 units, then it is 100 units long. If you scale to 2x it might render as 200px on screen but it's still 100 units long. Right?

 

Also, i have not seen any functionality to snap to other geometry. Is this doable in paper.js

I'm implementing this slowly as part of the user interaction layer. One thing you'll want to get familiar with is the HitTest method in the Project. You can use this to look for geometry that is near a point (such as where you click the mouse). Snapping to points on paths is pretty easy. Things like midpoints or tangents will take a bit more work.

The biggest thing that's currently missing IMHO is creating offsets of non-trivial paths. I see that this is on the to-do list and recognize that it's not a trivial problem. If all else fails my plan was to use one of the Voronoi libraries like Anders Wallin's and implement it on the server side, but if it could be done directly in paper that would certainly relieve me of a lot of bother.

[Ged Wed]

hey Colin,

thanks for the comments.

I am trying to use paper.js to create a 2d CAD package.

The concept of Model space and Paper space in the realm of 3D and 2D
CAD is different from using Illustrator type software.

http://www.youtube.com/watch?v=fBvHiZXyz74

[Jürg Lehni]

SVG offers the same advantages as PDF in terms of quality when printing.

And Cairo's svg2pdf command line tool works well for conversion of SVGs to PDFs:

http://cairographics.org/snapshots/

Or on a Mac you could install it through Homebrew:

brew install svg2pdf

Best,

Jürg

> --

> You received this message because you are subscribed to the Google Groups "Paper.js" group.

> To unsubscribe from this group and stop receiving emails from it, send an email to paperjs+u...@googlegroups.com.