FabricJS Plugin new version coming soon

#1 · January 14, 2021, 8:07 pm

As you know FabricJS plugin is one of the most powerfull VisualNEO Web plugins as it allows you to edit visually almost any graphic content. I have updated the plugin to include the latest library version and added new export and import options. Now is even possible to paste images directly from Photoshop-like software or copy the canvas to the clipboard to be pasted in design software (Chrome / Edge only).

Now some key events are pregrogrammed: Del key, Ctrl-C, Ctrl-V.

Export to .png and .jpg has been improved and now includes the possibility to export as Base64 so the image can be easily sent to neoPDF, stored in a database or shown in an Image object programatically.

Some possibilities: take your picture with neoWebcam plugin, add it to a Curriculum Vitae design you can edit with FabricJS plugin and then print the result as PDF with neoPDF. All plugins will integrate with each other quite better now.

I have updated the sample app here:
https://visualneo.com/tutorials/fabric/

Let me know what you think.

Vadim, CDY@44 and 3 other users have reacted to this post.

#2 · January 14, 2021, 9:10 pm

Hi,

Thank you very much.

Regards.

#3 · January 14, 2021, 9:24 pm

Hi Luis,
Thank you for that ! I will check it.

Best regards,

#4 · January 14, 2021, 9:57 pm

Thank you so much, Luis!!! It works very smoothly! Great!!!

#5 · January 16, 2021, 1:28 am

Gracias Luis. Este complemento me ha servido para hacer algunas aplicaciones como está:

https://genmagic.net/dibujo/dibuq2/

Tiene muchas posibilidades.

Vadim has reacted to this post.

#6 · January 16, 2021, 1:50 am

Great work Luis!

Thank you!

#7 · January 16, 2021, 1:56 am

¡Hola @rrey!

Fui a tu página de gráficos para dibujar. Es muy ingenioso. Bien hecho y buen trabajo

#8 · January 16, 2021, 9:00 am

Este complemento me ha servido para hacer algunas aplicaciones como está

Muy chula @rrey, me encanta ver las cosas que se hacen con VisualNEO :)
Muchas gracias por compartirlo.

#9 · January 16, 2021, 10:12 am

@rrey

¡Tienes un proyecto interesante! ¡Gracias por el ejemplo de uso!

¿Es posible añadir una opción para elegir el grosor del borrador?

#10 · January 16, 2021, 11:32 am

@vadim Claro que se podría del mismo modo que ya se puede modificar el grosor del lápiz, ya que la borrador dibuja con el color del fondo que es blanco.

Aquí os dejo también app oóvil para el área de lenguaje para niños pequeños para trazar las letras.

https://sites.google.com/genmagic.net/inicio/nuevo-repositorio-aplicaciones/Infantil-Inicial/descubre-la-letra

Saludos,

#11 · January 16, 2021, 11:35 am

@rrey

¡Excelente!

#12 · February 11, 2021, 1:53 am

@rrey

Just looked at your FabricJS Demo sample, it's very good.

I've been learning the joys and functionality of VisualNeoWeb over the past few weeks and have created a doodle/colouring app but am struggling to work out how to erase a section of the drawing or colouring directly on the canvas by using an eraser but I see you have managed to achieved this in your demo.

You mention to @vadim it's easy to create an eraser "since the eraser draws with the color of the background that is white."

I've found this is fine on a blank white canvas but when I load an image into a container that is located behind my FabricJS enabled drawing container, if I then use a white brush (as you suggest) it paints out what I have just drawn or coloured but it also over paints the black lines within the background image being traced or coloured in.

See the Image Uploaded, the lady's left eyebrow as an example was where I wanted to erase my colouring but as you can see the black outline from the background is removed as well as it is just painted white, so the whole eyebrow is removed!

Just wondering how did you manage achieve erasing (as in your Demo) when there is a background image present without removing the actual background drawing as well at the same time?

Please could you provide some details or a simple sample app?

Many Thanks

Paul

Uploaded files:

You need to login to have access to uploads.

#13 · February 11, 2021, 7:56 am

Hi @paultomo,

In the application that I made, the image is under a container without a background color, that is, transparent. This means that when you draw you are not drawing on the image but the upper container that is transparent.

#14 · February 11, 2021, 11:24 am

@rrey

Okay, yes I can do it that way too but the background image you draw on is faded into the background due to the transparency and the pencil colours also become transparent depending on the opacity level.

My app needs to keep the background image fully in view, being a colouring in app, then once the user has completed all the colouring in, both the background image outlining and colours are fully visible, allowing them to save it.

Thanks again for your reply, Luis has added an UNDO draw option allowing instant mistakes, colouring over lines, to be removed but it would be nice for a user to be able to remove a whole section of the image previously coloured in with an eraser.

I'll keep looking....

#15 · February 11, 2021, 11:43 am

I see others have shared their work so this is the app so far if you would like to see what I've been working on.

You can just doodle on the canvas or you can open your own locally downloaded line image to it colour it in.

I added lots of the useful FabricJS features: Center and Scale, Select, Duplicate, Cut, Paste, Send Front/Back, Add Rectangle/Circle, Undo Draw, Zoom and more.

Happy for you anyone who would like to take a look to do so.

https://paultomlinson.co.uk/Test_Area/DoodlePad

Thanks

Paul

#16 · February 12, 2021, 9:52 am

@paultomo It is not the opacity property but rather to remove the background color of the container, which makes it completely transparent. I attach a screenshot

Uploaded files:

You need to login to have access to uploads.

#17 · February 12, 2021, 12:54 pm

@rrey

Thanks for your advice. I set all background colours to off as you suggested but I'm still struggling to work this out and find that without some adjustment to the opacity setting, which either fades the image into the background or changes the pencil sharpness, the eraser just paints out the background image as well as the drawing lines, when I need the background image to fully remain and just the draws lines to be erased.

I'm probably just missing something quite simple here in what I'm doing.

I have created a simple sample with Pencil, Eraser and a background image that I have attached as a zip file. If you could find 10 minutes to take a quick look, alter my settings and return it back to me that would be very much appreciated.

Thanks

Paul

Uploaded files:

You need to login to have access to uploads.

#18 · February 12, 2021, 6:22 pm

@paultomo, please take a look here:
https://stackoverflow.com/questions/19311038/fabric-js-eraser-issue-canvas

Regards.

#19 · February 12, 2021, 7:17 pm

@paultomo Another solution could be to use fabUndoDraw "Canvas" . It is not the same as erasing but allows you to erase the last strokes. I attach an example.

Uploaded files:

You need to login to have access to uploads.

#20 · February 13, 2021, 2:55 am

@rrey @luishp Thanks for your help, I added the Undo Draw already, which is a good addition, something I suggested to Luis about a month ago and he decided it would worth including in the latest release.

Odd that fabricjs don't include an eraser but now I can see why...

Good evening to you all.

FabricJS Plugin new version coming soon - Forum

FabricJS Plugin new version coming soon