This is restricted (demo) version of my editor engine "PaperBuilder". It has been designed to construct online layouts and any sort of documents with vector- and raster graphics. Restrictions is:
Well, in simple words this editor is like Photoshop / Illustrator, but, of course, far less powerful.
With this demo I try to show some of engine's features, as well as myself and my skills.
Vector editing. User operates with vector primitives, e.g. rectangles, lines, ellipses (polygones, curves, stars, Bezier curves, whatever, could be added easily).
All objects are stored in JSON easy-read format, so editor could be embedded into the any environment as part of process, for example, as photobook editor.
Now then —
User can use one of two predefined styles (and defining new styles is pretty easy)
Editor allows loading background texture (.jpg) as well as using clean colors.
You can easily make your own list of dimensions.
To help users with printing borders.
Shows extra-convenient "compass" to make the rotation more accurate.
Move, align, distribute or delete bunch of objects.
"Must have" tool when you work with multiple object.
Makes objects above or below others.
No comments. Frankly speaking, I had one, but I had clicked "undo" on it.
And a lot of other conveniences.
I made my very own controls for this editor.
Convenient and powerful color chooser dialog.
Any Google WebFont could be attached.
Well, first of all, this is a contemporary stack of technologies and not all browsers and computers can work with it.
I used HTML-5 and CSS-3 here. The heart of Builder is HTML canvas with the excellent library KineticJS.
Twitter Bootstrap with my own addons and extensions is the skeleton, if I'd continue association. I used LESS PHP interpreter to manage a lot of CSS rules and files.
There is very little PHP code here because editor is client-side application. PHP serves only as aggregator and localization background. I used poEditor (.po and .mo files from Mozilla foundation).
And, last but not least, the Google WebFonts are plugged here to use fonts.