#fabricjs

[laravelreactjs]

SVG Editor

A super simple yet powerful, user-friendly, browser-based SVG vector editor. Built with the latest web development techs: React.js and Fabric.js. Provide your users an easy-to-use drawing tool. Or alternatively, it’s also a great starting point to build more complex things, like Canva. Editor Features The aim was to keep the editing experience easy for the average user. It contains only the…

View On WordPress

[shophub]

Why You Should Use This #1 Javascript Image Editor?

Why You Should Use This #1 Javascript Image Editor?

A JavaScript Image Editor Should have the quality of Superior trimming, flipping, pivoting, resizing, and changing of pictures. All these qualities are embedded in this Javascript Image Editor plugin. All that you expect from a picture cropper, Pixie packs all that you could require while trimming pictures, in light of its wonderful gadget freethinker structure it fits in all over. Authorize Aspect Ratio Authorize a particular harvest perspective proportion to ensure yield pictures constantly fit flawlessly. Offer inventive opportunity by characterizing a scope of perspective proportions to look over. Turn, Resize and Flip Turn, resize and flip pictures to make the ideal choice. Scale picture utilizing the mouse wheel or versatile multi-contact controls. Rapidly turn pictures in 90° advances, finetune the outcome utilizing the pivot control at the base of the viewport.   Pixie is completely adjustable, exceptionally performant and responsive photograph editorial manager for your site or versatile application.

More Reasons To Choose This #1 Javascript Image Editor_ Mix – Easily coordinate pixie into any current undertaking or application. Extensible – Pixie interface and API can be stretched out with new usefulness. Portable – Pixie has full versatile help and adjusts its interface to fit the size of any gadget consequently. Adaptable UI – Customize UI by appearing, or including new menu things, changing toolbar positions or utilizing an alternate subject. Translatable – Pixie's interface is completely translatable through the setup. Watermark – Saved photographs can be effectively watermarked with determined content. Modes – Choose between overlay(modal), inline or full-screen modes. Instruments API – Use all pixie apparatuses (resize, crop, outline and so on) through API without opening pixie interface. Adjustable Tools – All instruments are completely adaptable, you can expel or alter and include custom stickers, shapes, textual styles, casings and that's only the tip of the iceberg. State – Save current manager state in JSON position, taking into consideration usefulness like pre-constructed formats. Photograph Manipulation – Resize, crop, change and more through interface or API. Channels – Pixie accompanies many implicit channels like grayscale, obscure, dark and white, vintage and the sky is the limit from there. More channels can be included by means of API. Casing – Add worked in responsive edges to photograph of any size or include your very own edges. Harvest – Crop photograph to one of the determined angle proportions or let client select custom yield zone by means of UI. Draw – Powerful free illustration device bolsters both mouse and contact, has different brush types, hues and that's only the tip of the iceberg. Content – Full help for adding content to pictures. A few hundred of google textual styles can be utilized or just specially included text styles. Shapes – Custom shapes can be effectively included by just indicating SVG picture way. Stickers – Custom stickers can be included or evacuated. Any kind of picture can be utilized as a sticker. Corners – Image corners can be adjusted with one straightforward snap or API call. Void canvas – Pixie does not need to alter an existing photograph, custom pictures can without much of a stretch be made sans preparation too. History – All editorial manager activities are non-dangerous and can be effectively fixed and revamped through history apparatus. Articles – All items like stickers, shapes, and content are without anyone else layer and can be effectively moved, resized, erased and adjusted by changing their shading, including shadow, foundation, and the sky is the limit from there. Examples and Gradients – All items can be filled in with many inherent or custom examples and slopes. Sparing – A Modified picture can be effectively saved money on the nearby gadget or on the server through API or interface.. Zoom and Pan – Canvas can be zoomed and panned utilizing a mouse, mouse wheel, or contact and squeeze signals on cell phones. HTML5 – Pixie utilizes local HTML5, which implies it deals with each gadget. Documentation Online documentation can be found here.. Most recent rendition 2.1.3 | Changelog Read the full article

[claudinejoynicolas]

[paloobi]

Symph!

So excited to share the capstone project created alongside my amazing teammates Emily Intersimone & Mariya Bogorodova!

We built a web app called Symph that lets you create new musical ideas and share w/ friends. Our goal was to make music composition fun & accessible. Also, we really wanted to play with synthesizing music in the browser. Hope you’ll check it out and let me know what you think! We’re deployed at getsymph.io

You can also take a look at our source code on Github.

We built the app using the MEAN stack - MongoDB/Mongoose, Express, Angular & Node.

In addition, some of the key technologies & libraries we used included:

ToneJS - used throughout our app, this library provided us an abstraction over the Web Audio API, which let us schedule our music in a timeline of notes (instead of dealing with oscillators, frequencies & filters directly through Web Audio API). We scheduled our music using callbacks added to the Tone.Transport object. Our challenge was the make sure there wasn’t latency on playback when we added animations, or when trying to save the notes in a format we could send to the DB.

FabricJS - used on our Loop Editor to create the grid on which you can add notes. This library provided an abstraction over the HTML5 Canvas API. We created a canvas object, and drew a grid on it - FabricJS helped us add the functionality that lets you click, drag, extend, delete notes on that grid. Biggest challenge was making sure we had a way to not only save musical info about notes added to the grid, but also draw notes for an existing loop on load.

HTML Drag and Drop API - we created custom Angular directives to handle the drag and drop functionality on the Mix Editor page. This page lets you drag and drop loops into Tracks to make mixes. Things we had to consider included: copying loops dragged from the Loop Bucket, actually moving around loops that are dragged from within the Tracks, and adding a Delete button. We had to deal with ensuring there weren’t duplicate HTML IDs, and also making sure that when you drop a loop div into the Track, it actually adds that loop’s musical data to the timeline.

Overall, building Symph was an amazing experience - in no small part due to the amazing Mariya & Emily who I was lucky to be able to work with! We’re continuing to add to the application even now, including things like new instruments, sampled instruments (piano sounds!!), etc. As of late, I’ve been working on creating tests for the routes & models, to make it easier to continue developing the app.

Feel free to reach out if you have questions about Symph, want to learn more about how we made it, etc. Always happy to chat! :)

[corymawhorter]

So you want to screenshot or take a thumbnail of a FabricJS canvas...

Sounds simple, right?  Wrong.

I've been digging into fabricjs for a little while now for a pretty large project I'm working on.  Conclusion?  It's a bit of a mess... to say the least...

First, let's get the solution to your problem out of the way, and then I'll explain why I'm beginning to regret going with Fabric.

I ripped this right out of my code and replaced the vars on the fly, so YMMV with running it.  

You'll need a couple different fabric canvases and then a canvas for your generated thumbnail.  Here it is: real-time thumbnails of a FabricJS canvas without selection controls and other crap:

https://gist.github.com/a4f9b3638018f000f174

Now... you're probably asking yourself.  Why can't I just grab the contents from fabricMain and be done with it?

Answer: Because there is no way to grab it without the controls being visible. (Please correct me if I'm wrong.  *Please!*)

Can you hide the controls temporarily?  No.  I couldn't even find a way to deactivate/reactivate a selection -- which would be a terrible solution from a UX perspective.

That's why you need to use the intermediary canvas.  So that we can grab a control-less image without fucking up our user's selection.

So what's with the activeGroup stuff in that code?  I have no idea.  For some reason, if there is an activeGroup, the cloned objects will not show up in the fabricThumb canvas....?  Bug? Feature?

Try it... select 2 objects and poof, they're gone from the generated thumbnail.  Select no objects and they're all back.  Select one, they're still both there.  I got nothing...

So that is why we need to wade into the evil waters that is the activeGroup and do all that other BS for something that should be relatively straightforward and common. Phew!