Extension of Dojox.GFX to interact with SVG, Canvas, and VML (zoom, rotate, move, add multi-line text, web fonts, save, etc). See stelapad.com for a demo.
-
Download and extract the zip file of this repository to a web server directory (see humans.txt for a list of included libraries and tools).
-
Download and install PhantomJS (for vector rendering).
-
Run index.html in your web browser.
This section will be expanded in the future. For now, see editor.js and Pad.js for all capabilities.
Editor keyboard shortcuts:
Arrow move in 1x increments
Shift + Arrow move in 10x increments
Delete delete
Esc deselect
Shift + Ctrl + Home send to top
Shift + Ctrl + End send to bottom
[ rotate counterclockwise 15 degrees
] rotate clockwise 15 degrees
Shift + [ rotate counterclockwise by 90 degrees
Shift + ] rotate clockwise by 90 degrees
Alt + [ rotate counterclockwise by 1 pixel
Alt + ] rotate clockwise by 1 pixel
0 reset rotation to original orientation
S scale to fit
Ctrl + Handle (Anchor) rotate and resize
Double Click create or edit text
Q: Will this work with older browsers (such as IE 7)?
A: Yes. It has been tested on all major browsers including IE 7.
Q: What modifications did you make to Dojox.GFX?
A: svg.js and vml.js were directly edited for bug fixes. Other than that, the only additions are the dojox/stelapad folder and util/buildscripts/profiles/stelapad.profile.js
Q: If StelaPad is based on Dojo, why is jQuery included?
A: Jeditable is needed because pure Dojo was buggy here. Feel free to fork and improve!
Q: What components of jQuery UI are in the demo?
A: Core, Widget, Mouse, Position, Dragable, Droppable, Resizable, Accordion, Dialog, and the dark-hive theme
Q: When loading a saved project, my text is out of place. What do I do?
A: If your project is loading web fonts, the font may not have had time to finish downloading before the text was rendered. To resolve this, wait a minute or two to allow the fonts to finish loading into your browser's cache and then select File > Open Project from the StelaPad menu and re-open your desired project.
Q: The custom fonts don't show up in my SVG viewer. What do I do?
A: Unfortunately, many desktop SVG editors and viewers (such as Inkscape and Eye of GNOME) do not support web fonts. We recommend you open a ticket with the respective application owner to request this feature be added to their tool. In the meantime, a workaround fix is to download and install the font locally. As of this writing, all SVG-capable browsers support @font-face and the Squiggle browser supports SVG's native font-face tag.
Q: How do I prepare for deployment (e.g. build, minify)?
A: Set "isDebug" to false in index.html and then run Google's closure compiler via "dojo-release-1.7.3-src/util/buildscripts/build.sh profile=stelapad action=release" for Linux or "dojo-release-1.7.3-src/util/buildscripts/build.bat profile=stelapad action=release" for Windows. This will output the result in a new Dojo "release" folder that you can reference in your index.html and json2svg-page.php files.
Q: How does it work?
A: The editor combines regular (raster) images with vector graphics. It uses your browser's native vector graphics engine – VML for IE 7/8 and SVG for the rest (or Canvas on some devices that don't support SVG). Vector images are converted by svg2json and managed by a custom library that extends GFX.
- JavaScript and VML performance is very slow. Resolution: install Google Chrome Frame.
- Base64 support is limited or nonexistent. Opening projects saved from other browsers may not display images correctly. Resolution: install Google Chrome Frame.
- FileReader is not supported. Images will be hosted by imm.io with the following restrictions: images deleted after 30 days of inactivity and maximum image size limited to 1600x1600 (4000 pixels).
- IE7 does not open saved project files correctly. Resolution: Upgrade to IE 8 OR do not use that feature with IE 7 OR install Google Chrome Frame.
- IE may display a security warning when attempting to save an image, PDF, or SVG file. Resolution: Press and hold the "Alt" key while clicking the 'Save As' menu option OR follow this guide to update your security settings OR install Google Chrome Frame.
- VML does not support web fonts. Resolution: install Google Chrome Frame OR use the default Helvetica font
Copyright (c) 2012, Stela 5
(see humans.txt for other licensed material used herein)