#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…

[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

[evemoedesu]

4th Anniversary of EVE Online shipgirls

repost from commemorative twitter thread: https://twitter.com/evemoedesu/status/1429407686018351111

Last year there happened some important things, the top most are (in no particular order):

entire collection card design revision

me starting doing commissions

not long ago, me starting site development for gallery display purposes

Another was keeping a year of monthly schedule w/o slip ups, but I think I've already wrote about it somewhen in June.

Anyway, back to important things list.

Remaking card designs for entire collection (was 150 at the time) was a difficult task, but it paid off.

I got some knowledge of bash shell scripts, Python, Imagemagick. Result was script to generate entire collection (both cards and fullsize posters) almost effortlessly.

And later I started working on UI version of this, but using FabricJS and Quasar. Which is still in progress, but it can export art manually at least.

Commissions were a great way to meet known/new people and work on ideas I didn't thought of and further improve skills.

Gonna brag - with detailed sketch I can finally finish shipgirl in a single day.

If I have such amount of spare time, that is lol Grimacing face

Also I think people like catgirl+shipgirl combination a lotGrinning face with smiling eyes

And next - gallery site.

The largest problem with art sites is lack of specific filtering inside of user galleries. Flickr comes the closest one to this.

Still, you can't, to say, apply faction filter or sort/group by it.

I hope that upcoming site will help with this. Someday!

With this, time to discuss things that will be.

I hope, that just like these past four years, I'll make it to the end of fifth stil doing art, as usual.

With support from all of you, of course!

I'm thinking about adding some info in the account bio to brag about :D

And one thing I put aside was regularly updating header art with latest featured shipgirl art. Now is the time \0/

September coming soon, and, as a tradition, Triglavian shipgirls will be there. For now, there two of them in the plans, with third is in not-quite-sure state.

With one less shipgirl in the pack than usual, I think about Abaddon remake. Bigger and better.

Following it, I want to remake the bombers art. Mostly due to reasons of them being overpaint of official art and quite low-res to boot. When - is undecided yet.

November is AT time, so yep, shipgirls from tournament-themed or similar titles.

In the meantime I hope to deliver same (and better) quality shipgirls as usual.

I wonder how much I'll improve compared to this year.

And that's all for this thread, I think.

Hooray for the fifth year and cya all soon o7

[macronimous]

#FabricJS History Operations (undo, redo) and Useful Tips https://t.co/sQUBfyiQA5 #JavaScript https://t.co/8xDpCTtTtj

#FabricJS History Operations (undo, redo) and Useful Tips https://t.co/sQUBfyiQA5 #JavaScript pic.twitter.com/8xDpCTtTtj

— Macronimous.com (@macronimous) September 2, 2019

from Twitter https://twitter.com/macronimous September 02, 2019 at 10:30PM via IFTTT

[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!