This version has been completely overhauled from an earlier simplistic prototype. It works reasonably well with mobile and desktop browsers. Undo/Redo and a basic set of vector graphic primitives are now supported.
It features PNG and SVG export. It also exports high-res PNG "tiles" that are suitable for use with tools like Photoshop pattern fill, graphics textures, or upload to services such as Spoonflower and Contrado to be used in printed patterns.
Local Install / Build Setup
# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev
Currently Vue handles all DOM-related UI elements, it does not however handle the canvas drawing and state management, as that's not really what it's built to do. I may consider making canvas management a bit more Vue-ish to exploit its reactivity tools, but will likely separately organize, simplify and generalize drawing state management.
Almost all actions are routed through a simple global state store and event bus, it has not yet been ported into Vuex but this would not be difficult.
- The color panel code is derived from Vue-Color. It's been tweaked to fix a touch-event handling bug and to modify style defaults.
- Canvas touch-handling is handled by Hammer.js
- Uses eligrey's FileSaver.js and canvas-toBlob.js polyfills to support saving files.
- Uses a modified canvas2svg to export to SVG.
- Also using vue-markdown-loader for handling inline written content.
- icomoon was used to help with icon generation.