- Ability to draw freehand shapes within the bounds of a canvas element.
- Drag and Drop elements on the canvas and move them around.
- Dynamically generate elements onto the canvas for user.
So the closest I have come so far is sketch.js for the handling of freehand shapes and kinetic.js for the shape manipulation and the drag and drop. Both seem to work very well on their own, but when I apply to the same canvas sketch.js takes control and removes all the work that kinectic.js has done and claims the canvas for itself.
I have to figure out if there is a way for me to use sketch.js as another 'layer' within kinetic.js which will allow the user to annotate and drag and drop elements within the same canvas.
I have to figure out if there is a way for me to use sketch.js as another 'layer' within kinetic.js which will allow the user to annotate and drag and drop elements within the same canvas.
Or alternatively simply use kinetic.js for everything. I will proceed with this line of thinking first as this would be the best outcome as sketch.js is pretty simple to begin with and should be already present within kinetic.js.
More reading and looking at the Crazy Snake Tutorial has lead me to believe it can be done, but I have stepped back and thought about what it is I am trying to do. I want the user to be able to drag fixed elements and also annotate on the same canvas? That sounds pretty screwy, in fact I don't think it has been done on a Windows/Mac app without the use of layering. As you wont want to place elements and draw at the same time, it can become messy.
I will change the process to a two step, first draw your diagram freehand using sketch.js, then drag your elements around till your hearts content, ill obviously have to provide a way to switch between the tools but I think that will be the fastest and best outcome for the client.
I am finishing off the job now, looks like sketch.js and kinetic.js did work out well, the sketch was created with sketch.js, then the dataURL string was saved into a variable and placed into a layer within kinetic.js which had the elements pre-loaded on top. This way user can't mess up what they did in step one but they have full flexibility to drag elements around the stage. After the user saves, the dataURL replaces the first dataURL, then I used mydigitalstructure to save the image as a PDF. Emailed it across to the user and then done.
One major snag I hit along the way in my app was that when I positioned a canvas outside of the iPad's viewport and had to swipe my finger down to see it, the shapes within were no longer draggable. This was not an issue with any desktop browsers, I guess it had something to do with the touch implications. Seeing as I didn't want the canvas to span multiple viewports I just hacked around it by positioning the viewport before placing the canvas and it seemed to work.
I am sure it was probably just a positioning issue with some of my HTML, as this example works on ipad fine and the canvas is first rendered off-screen. No biggie, just annoying.
All in all very interesting development project and experience that can be re-used in the future.
I will change the process to a two step, first draw your diagram freehand using sketch.js, then drag your elements around till your hearts content, ill obviously have to provide a way to switch between the tools but I think that will be the fastest and best outcome for the client.
I am finishing off the job now, looks like sketch.js and kinetic.js did work out well, the sketch was created with sketch.js, then the dataURL string was saved into a variable and placed into a layer within kinetic.js which had the elements pre-loaded on top. This way user can't mess up what they did in step one but they have full flexibility to drag elements around the stage. After the user saves, the dataURL replaces the first dataURL, then I used mydigitalstructure to save the image as a PDF. Emailed it across to the user and then done.
One major snag I hit along the way in my app was that when I positioned a canvas outside of the iPad's viewport and had to swipe my finger down to see it, the shapes within were no longer draggable. This was not an issue with any desktop browsers, I guess it had something to do with the touch implications. Seeing as I didn't want the canvas to span multiple viewports I just hacked around it by positioning the viewport before placing the canvas and it seemed to work.
I am sure it was probably just a positioning issue with some of my HTML, as this example works on ipad fine and the canvas is first rendered off-screen. No biggie, just annoying.
All in all very interesting development project and experience that can be re-used in the future.
No comments:
Post a Comment