How to draw selection box on SWT canvas?

Question

I have an SWT Canvas with some image on it. I want my user to select parts of the image by clicking, holding the left mouse button and opening a selection box by moving the mouse. As a visual feedback I want to show the selected rectangle as a transparent overlay over my image.

The problem is I have not clue how to best achieve this? Can someone give me a hint?

Answer 1

There is another approach that native platform provides to do this. Use SWT org.eclipse.swt.widgets.Tracker

How do I make it possible to resize a composite by dragging the corner

Answer 2

My answer is somehow similar to the one I gave here:

SWTChart mouse event handling

The code below should give you an idea on where to start. It basically remembers the location of a MouseDown event. Each time the mouse is then dragged, a rectangle is drawn from the starting location to the current location. Once MouseUp happens, everything stops.

public class DrawExample
{
    private static boolean drag = false;
    private static int startX;
    private static int startY;
    private static int endX;
    private static int endY;

    public static void main(String[] args)
    {
        Display display = new Display();
        Shell shell = new Shell(display);
        shell.setText("Drawing Example");

        final Canvas canvas = new Canvas(shell, SWT.NONE);
        canvas.setSize(150, 150);
        canvas.setLocation(20, 20);
        shell.open();
        shell.setSize(200, 220);

        canvas.addListener(SWT.MouseDown, new Listener() {

            @Override
            public void handleEvent(Event event) {
                startX = event.x;
                startY = event.y;

                drag = true;
            }
        });

        canvas.addListener(SWT.MouseUp, new Listener() {

            @Override
            public void handleEvent(Event event) {
                endX = event.x;
                endY = event.y;

                drag = false;

                canvas.redraw();
            }
        });

        canvas.addListener(SWT.MouseMove, new Listener() {

            @Override
            public void handleEvent(Event event) {
                if(drag)
                {
                    endX = event.x;
                    endY = event.y;

                    canvas.redraw();
                }
            }
        });

        canvas.addListener(SWT.Paint, new Listener() {

            @Override
            public void handleEvent(Event event) {
                if(drag)
                {
                    GC gc = event.gc;

                    gc.setBackground(Display.getDefault().getSystemColor(SWT.COLOR_BLACK));
                    gc.setAlpha(128);

                    int minX = Math.min(startX, endX);
                    int minY = Math.min(startY, endY);

                    int maxX = Math.max(startX, endX);
                    int maxY = Math.max(startY, endY);

                    int width = maxX - minX;
                    int height = maxY - minY;

                    gc.fillRectangle(minX, minY, width, height);
                }
            }
        });

        while (!shell.isDisposed())
        {
            if (!display.readAndDispatch())
                display.sleep();
        }
        display.dispose();
    }
}

It looks like this: