Drawing on images with Eclipse RAP

June 13, 2012 | 1 min Read

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:

  1. Create an image resource from a file.
  2. Create a Canvas widget. This is a blank area that we can paint on, with the help of a PaintListener object.
  3. 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.
  4. 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).

If you use RAP for mobile devices you can replace Canvas with ClientCanvas for better performance (it does more work on the client-side).

You can view the java code here. A complete project is available in my ‘rap-examples’ on github.

Follow me on twitter, Elias.