how to make a drawing editor with paper.js?? Need help !!

[jonath...@gmail.com]

Hi all,

I want to create a drawing editor with paper.js and I wonder if it is possible ???

I read the documentation and I saw that it was possible to make several tools with using javascript direcly but
it is not compatible with all browsers and I wonder if it is possible to make several tools with the script paper.js??

Environment because I make a drawing editor like paint ( windows ) I want to associate paper.js functions to buttons.

Thank you in advance and sorry for my poor English

[Andrea Gasparini]

Hi, everything is possible. ;)
The only thing that will be tricky will probably be doing an eraser.
(just because we're talking about vector graphics, not just
bitmaps.... ).
In a project I found a solution that worked for me: fundamentally I
merged all the images into another canvas... that limits the undos,
though.

--
- Andrea Gasparini -

[Stewart Smith]

Yup. Totally possible to create a drawing editor with Paper.js: http://chatttr.com

Super basic, but you get the idea. Key commands and extra info are listed here: http://chatttr.com/about.html

s

[jonath...@gmail.com]

Thanks for the response,
However, I can not understand how I can make several tools with the library ...

[jonath...@gmail.com]

Moreover, I saw on the site you sent me they used paper.js mode and not pure javascript paperscript ..
implying bugs on google chrome ...
and you have a tool on IE ..
not good :)

[Jürg Lehni]

There is a tutorial on how to use plain JavaScript on the website:

http://paperjs.org/tutorials/getting-started/using-javascript-directly/

But if there are bugs with Chrome that we are not aware of, please create an issue with a test-case for it:

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

Lastly, the creation of multiple tools is pretty straight forward:

Simply create Tool objects for each tool, and attach the mouse handlers to them, e.g.:

var tool1 = new Tool();
tool1.onMouseDown = function(event) {
...
}

var tool2 = new Tool();
tool2.onMouseDown = function(event) {
...
}

And witch between them by using:

tool1.activate();

resp.

tool2.activate();

This could be handled from a toolbar that you create yourself.

Hope this helps!

Best,

Jürg

[jonath...@gmail.com]

Yeah ok sorry for my bad explanations.
I tried to make different tools in pure javascript and i have some bugs on Chrome and Firefox.
But,
When I try to activate a tool firefox function returns true and I will not activate ...
Chrome on the function of the pen malfunctions.
By against all paperscript function work well.
The problem is that if you want to create several tools we have to go by pure javascript functions.
So how to make focntions javascript compatible??
Is someone already doing this kind of experience?
thank you for the answer anyway

Le dimanche 13 janvier 2013 09:36:30 UTC+1, jonath...@gmail.com a écrit :

[jonath...@gmail.com]

I sent you an example for testing.
http://chatttr.com/
try drawing with chrome and see the bug.

Le dimanche 13 janvier 2013 09:36:30 UTC+1, jonath...@gmail.com a écrit :

[RajeshKumar T N]

Is that possible to create paint bucket tool?

[Jürg Lehni]

A paint bucket is a pixel oriented operation that uses the flood fill algorithm, so it's not really aimed at vector graphics.

But you can of course change the fillColor of selected items.

> --
> 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.
> For more options, visit https://groups.google.com/groups/opt_out.

[Jürg Lehni]

We were using a format in these links that appears to not work on Firefox. I've updated the example to an approach that works on all browsers:

http://paperjs.org/tutorials/getting-started/using-javascript-directly/

[Péter Vívó]

I started making vector flood fill algorithm under paperjs, like Adobe Illustrator Shape Builder tool. 

idea:  

1. get flood starting point 

2. calculate each intersection points ( problem found segments self intersection point )

3. find nearest path, point 

4. if path is closed, is the simple work just need to change fill color. 

5. otherwise - start "walking"  to next intersection points until reach nearest point - this shape call 'islands'

   meanwhile skip segments with one intersection point and end point

7. check other segments which is don't part of first island but inside. 

8. finally union islands.

... under progress 

[James T]

After a lot of messing around trying to get a pure vector flood fill working, I've successfully implemented a version of this in my open source project "PancakeCreator", with caveats:

• Uses a standard raster flood fill algorithm, from a raster rendering of a given layer. Though this is not clean or true vector, it does what a user might expect and is the method chosen for flood fills in Inkscape, so I figured it was good enough for them, why not us.
• The flood fill algorithm returns a messy set of random points that are guaranteed to define the pixel boundary of the fill shape.
• Picking the topmost point, I find the closest distance from each point to the next to recreate the filled shape.
• Any point with a distance greater than a given threshold (depends on the rasterization resolution), is an island, and is grouped as a secondary path inside of the final compound fill shape.
• These jagged, too-many-point paths then have paper path simplify run on them, and are presented as the new fill path.
• This results in somewhat lumpy & imprecise paths, but it does work a lot better than nothing, and does a pretty good job. This could likely by improved by snapping individual fill boundary points to nearest paths.

I generally imagine that with single stroke non-fill paths it's possible to join them in a way to get a true vector boolean path fill out of it, but not with path booleans as they stand in Paper.JS.

[Jürg Lehni]

If I understand you correctly, then my plan outlined here for how to handle open paths with boolean operations should help with such endeavors?

https://github.com/paperjs/paper.js/issues/757#issuecomment-132998373

--
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.

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

[James T]

Absolutely!  The drawing tool I created in PancakeCreator is limited to drawing only open paths or closed non-fill strokes. My initial tests covered a wide range of intersecting hand-drawn arcs with occasional self intersection, with the intent during flood fill to "boolean" all paths on a layer sequentially, then pick the filled area under the cursor. This failed miserably as current (release before last?) boolean operations on open strokes were quite messy and self intersections in combination with open paths particularly produced strange/unpredictable output. I abandoned work on the boolean route after only a week.

I'd love to switch back over if there's work being done to improve it. The math behind the path booleans boggles my brain, but if it's becoming possible and there's lots of testing (love the paper boolean demo testing page!), I think it's work going back into. Especially considering the processing time required for my somewhat naive fills can be quite long (> 20 seconds after click for large areas, terrible for UI), even though I'm rendering a relatively low resolution image to create my bit maps.

[Jürg Lehni]

James, you'll be happy to read about this recent development:

https://github.com/paperjs/paper.js/issues/757#issuecomment-150849565

I think after about two months of very intense debugging and refining work together with @iconexperience, the boolean operations are now rock-solid, working well well on all kinds of weird paths, with self-intersection, partial overlaps, tiny loops, etc. The main work was on closed paths, but the support for open paths is the cherry on top that I threw in today : )

It's time for a new release I think!

J

[James T]

Beautiful work! That must have been an incredible undertaking. As it happens, my raster based fill I'd devised has edge case issues that are not easily resolved, so this may definitely become incredibly useful, assuming I'm given the time to try to make it work.

My going theory was that by iteratively dividing all the non-closed and closed paths on the entire canvas, then using a hit test to determine the closed path below the cursor. I'd then fill that shape, then remove all the other temporary shapes.

One issue remains that there's no way to offset closed paths, as you can with JSClipper. I understand that that's a polygonal only library, but that feature opens up a considerable amount of very useful tools in machine fill path planning.

[Jürg Lehni]

Path offsetting and stroke expansion (both are directly related) are on our TODO list and I'm quite keen on tackling this soon. There's an issue about it here:

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