Raphael.js is a wonderful small library to help you playing with vector graphics in JavaScript.
In this series of posts I’ll try to explain how you can improve your Raphael.js custom code by extracting parts of it into Raphael’s primitives that can be later instantiated and used in your or other people projects.
About the problem
Its a good practice to always have a good start when developing things. By that I mean it always good to take a bit more time to consider how to architect the solution for the problem you are fixing so that you can later easily refer to it and maybe potentially reuse it in some of your further projects. Doing so usually brings up a subject of introducing OO design and modularization to your applications.
I wanted to show you how you might improve your Raphael.js code by factoring out a thing that might be reusable in a separate Raphael component (or primitive) that can be later easily used anywhere by simply including and instantiating it.
The problem I made up today is ‘Outfit Editor’. Imagine that you have a need to build an online outfit editor in javascript (svg lets say), that would enable users to select each individual outfit item and bring it ‘to the stage’ where they might edit it or perform various things with it (example see how that particular item fits in with the remaining items selected by the user).
What we would ideally want to have from our Outfit Editor is:
- That it offers a list of items to select from in a separate section/area (‘Carousel‘)
- That we could pick up each item and bring it to the ‘Editing Stage‘ – place where we bring in all the items that we like, so that we can combine them, see how they fit together, change tier sizes, dump them if we don’t like them…
- That each item should be draggable.
- Within the Carousel we should be to able to visually distinguish outfit editor items that are already selected
- Items brought to the Editing Stage – Active Items, should be restricted to only be dragged within the Editing Stage so that they are still partially visible when we try to drag them out.
- …
Here is the image of how our final thing will look like:
We will touch on following technologies in this post:
Sit tight and please send some feedback ( motivate me to do more 😉 )!
uroslates 