07-23-2011, 01:37 PM
07-23-2011, 08:30 PM
All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
07-23-2011, 11:47 PM
you need to use the canvas tag to do all that. canvas can rotate, reposition, stretch, etc, as well as export to jpeg or png.
i don't know of any pre-built tools for doing all this, but there are lots of tools, both native and library-based, that can be used for all the different sub-parts of your overall procedure.
the way i would do it would be to use the canvas to draw the bg, and offer drag-and-drop html elements as icons to drag over the bg. you can create onclik handlers for the draggables to let them assume different tasks like label, rotate, delete, etc. at the end, would then read the pixel position of each draggable (relative to the top-left of the canvas tag), and then one-by-one, draw() the icon of the draggable into the canvas. the last step is something like calling window.open(canvas.toDataURL('image/jpeg')) to grab your setup map as an image file.
@Philip M- what part of this requires a server? how do you do drag and drop on a server app?
07-24-2011, 01:40 PM
07-24-2011, 08:00 PM
jQuery can indeed make this easier, especially if xbrowser compat is at the top of your list.
specifically, it has good tools for grabbing lots of elements at once, getting the pixel pos of on-screen elements, adding click handlers, and offered drag and drop plug-in libraries.
often i'm fairly anti-jQuery, but that mostly because people put it an html document for one or two fx that could easily be hand-coded or done in css these days. For apps and game interface like the one described, jQuery is much less of a burden since the same page stays loaded for a long time, and so jQuery only has to load once. It's when it loads every time i click a new 5kb static page that it really drives me nuts...
07-24-2011, 11:21 PM
I have been needing to dive in jquery for other reasons anyhow, so this should work out good. I agree completely, the only reason I have not used jquery yet is because I have only done basic things that can and should be done by hand.
I did a little messing around with http://raphaeljs.com/reference.html and I was able to select a map, and then select an icon and drop it into the center of the map, but I couldn't figure out how to select that icon and then manipulate it (move, rotate, stretch, ect)
I am a bit busy so I may put this off or pay someone else to do it, but it is great to know jquery can do it.