Recently, I was asked how to create a web application that allows the user to draw on images:
We have an application to deliver training content to medical professionals. An important issue for us is user-interaction with images. E.g. displaying images and allowing users to draw on them.
The example below shows how to draw on a static image using our Eclipse RAP framework. It works as follows:
- Create an image resource from a file.
- Create a Canvas widget. This is a blank area that we can paint on, with the help of a PaintListener object.
- We use a MouseListener to react to the user’s clicks. A left-click adds a Point. A right-click removes a Point. The click triggers a redraw operation.
- We use a PaintListener to draw on the canvas. The listener has access to a GC object. This is our ‘brush’ for drawing on the canvas. We draw the image first and then a sequence of lines using the stored points (step 3).
Follow me on twitter,