2

I've done this JSFiddle for you to make it easier to explain.

http://jsfiddle.net/eAV6w/30/

There are two images, one on top which is a grey surround with a transparent rectangle in the middle. Also a picture behind that which is just white with red squares. I want to the user to be able to drag the image behind (red squares) around and make the image resizable. I have a few problems:

  1. I don't know how to make the image draggable, I've Googled but I don't really understand it.

  2. The image is behind a static image, clicking will simply click the top image and not the one behind.

  3. The image behind is sometimes drawn after the one in front, so I think I need a delay draw to the front image. I'm not sure how to do this either.

Obviously the images are just made for your purpose. Once the user has resized their image and moved it to the correct position, they will be press download, where the canvas will convert to png and save to the server, and then download to the user. Using PHP, not sure how to do this yet but I think I can work this one out.. Maybe :) It's mainly the drag and resize bit that's annoying me at the minute.

If anyone can help, that would be amazing and I will thank you lots. :) This is my first experience asking a question on here.

user1101975
  • 21
  • 2

1 Answers1

0

Welcome to StackOverflow :)

There are a lot of ways you could approach this. You could do this with pure HTML or SVG or Canvas. For canvas you'd need to make your own persistent objects and dragging code. I've made tutorials on making and moving selectable shapes on a canvas. (Though I'm actually in the process of overhauling them to make them much easier to understand, so stay tuned in a day or two).

SVG might be a bit easier to get all this working because events are built into every SVG object already. Tutorials on draggable SVG objects ought to be easy to find.

You'll want to have code that will check every time an object is let go of to see if it is correctly within the bounds you want it to be in or not. Be prepared to keep track of a lot of x,y positions and the width and height of each object.

As for 3: This is occuring because you are not using the image's onload event. See other questions on StackOverflow like this one for help: Image drawn to HTML5 Canvas does not display correctly on first load

Community
  • 1
  • 1
Simon Sarris
  • 62,212
  • 13
  • 141
  • 171