Question

I want to build a gui application, which should be completely drawn on a canvas, no other widgets will be used.

package cn.ggfan.fun.music.gui;

import org.eclipse.swt.SWT;
import org.eclipse.swt.events.PaintEvent;
import org.eclipse.swt.events.PaintListener;
import org.eclipse.swt.graphics.Color;
import org.eclipse.swt.layout.FillLayout;
import org.eclipse.swt.widgets.Canvas;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Shell;

public class GGPlayerGUI {

    private static Shell shell;

    /**
     * @param args
     */
    public static void main(String[] args) {
        final Display display = new Display();

        shell = new Shell(display, SWT.NO_TRIM | SWT.RESIZE);
        shell.setLayout(new FillLayout());
        shell.setSize(300, 500);
        shell.setAlpha(200);
        Canvas canvas = new Canvas(shell, SWT.NONE);
        canvas.setBackground(display.getSystemColor(SWT.COLOR_BLACK));
        canvas.addPaintListener(new PaintListener(){

            public void paintControl(PaintEvent e) {
                e.gc.setAlpha(255);
                e.gc.setAntialias(SWT.ON);
                e.gc.setLineWidth(2);
                e.gc.setForeground(new Color(display, 187, 30, 136));
                e.gc.drawLine(0, 80, 300, 80);
                e.gc.drawLine(0, 450, 300, 450);
                //gc.fillPolygon(new int[] { 25,5,45,45,5,45 }) 
                e.gc.setBackground(new Color(display, 187, 30, 136));
                e.gc.fillPolygon(new int[]{100,470,90,475,100,480});
                e.gc.fillPolygon(new int[]{110,470,100,475,110,480});
                //e.gc.fillPolygon(new int[]{100,470,90,475,100,480});
                e.gc.fillRoundRectangle(145,470,3,10,2,2);
                e.gc.fillRoundRectangle(152,470,3,10,2,2);

                e.gc.fillPolygon(new int[]{200,470,210,475,200,480});
                e.gc.fillPolygon(new int[]{190,470,200,475,190,480});
                e.gc.setForeground(new Color(display, 250, 250, 250));
                //e.gc.setLineWidth(1);
                e.gc.drawOval(80, 455, 40, 40);
                e.gc.drawOval(130, 455, 40, 40);
                e.gc.drawOval(180, 455, 40, 40);
            }
        });

        shell.open();

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

        display.dispose();
    }

}

it looks like this:

what should I do to make the “buttons” can be clicked and have hover effect?

Answer 1

If I understand your code correctly, your buttons are circles (ovals) on a Canvas.

You need to write a position method that determines whether or not a particular x, y point on the Canvas is inside or outside of one of the ovals. You use a MouseMoveListener, the mouseMove method together with your position method, to determine when the mouse is inside or outside one of your ovals.

If the mouse is inside an oval, you draw the “hover” version of the oval. If the mouse is outside an oval, you draw the regular version of the oval.

You use a MouseListener, the mouseDown method together with your position method, to determine when the user has left clicked on one of the ovals.