Skip to content

blaise graphics

Elisha Peterson edited this page Sep 14, 2019 · 1 revision

Using blaise-graphics

blaise-graphics is a scene graph and style library for creating interactive graphics in Java. It is intended to be as simple to use as possible. This documentation assumes familiarity with setting up basic Swing UI's, as described in https://docs.oracle.com/javase/tutorial/uiswing/components/frame.html.

Hello World Example

blaise-graphics includes a custom swing UI component JGraphicComponent that graphics are added to. Basic graphics can be created using the basic factory methods in the utility class JGraphics. Here is how to create a canvas containing a simple graphic:

    // ... set up JFrame or another window to host the canvas

    JGraphicComponent canvas = new JGraphicComponent();
    canvas.addGraphic(JGraphics.point(new Point(50, 50)));

    // ... add canvas to the window and make the window visible

The utility method JGraphics.point creates a Graphic object that includes a point and an associated style. If you want to change the appearance of the point, initialize the point with an associated style:

    canvas.addGraphic(JGraphics.point(new Point(100, 50), 
        Styles.fillStroke(Color.yellow, Color.red)));

The utility method Styles.fillStroke creates an AttributeSet object, which encapsulates a set of style properties in a key-value map. BlaiseGraphics uses a standard set of style names that are closely aligned with the SVG standard. The fillStroke method creates a style object with attributes for fill and stroke.

To complete this example, let's add a rectangle around the two points:

    canvas.addGraphic(JGraphics.path(new Rectangle(25, 25, 100, 50),
        Styles.strokeWidth(Color.blue, 2f)));

When the canvas is rendered, it should appear as below:

Hello World Image

Modifying the Canvas

The JGraphicComponent uses a default background color and supports limited interactivity by default. The canvas behavior can be easily customized in a few different ways:

    // modify the canvas background color
    canvas.setBackground(Color.black);

    // enable pan and zoom mouse gestures
    PanAndZoomHandler.install(canvas);

The PanAndZoomHandler sets up a number of interactive functions:

  • Click and drag anywhere on the canvas to pan. (If Shift is pressed, restricts pan to horizontal or vertical.)
  • Use the mouse wheel to zoom in or out.
  • With Alt pressed, click and drag to draw a box to zoom to.

Selecting Graphics

BlaiseGraphics supports basic selection mouse operations, but these must be enabled for both the canvas and the graphic being selected:

    // allow user to select graphics
    canvas.setSelectionEnabled(true);

    // create a graphic to support selection
    PrimitiveGraphic pg1 = JGraphics.point(new Point(50, 50));
    pg1.setSelectionEnabled(true);
    canvas.addGraphic(pg1);

To select a graphic, hold down Ctrl and click on it, or drag a box around it. The graphic's appearance will change to show that it is selected. Holding down just Ctrl will toggle the selection. Holding down Ctrl+Shift will always deselect items, and holding down Ctrl+Alt will always select items.

To respond to selection events, add a listener to the canvas's selection model:

    canvas.getSelectionModel().addPropertyChangeListener(
            SetSelectionModel.SELECTION_PROPERTY, new PropertyChangeListener(){
        @Override
        public void propertyChange(PropertyChangeEvent evt) {
            System.out.println(evt.getNewValue());
        }
    });