Experiments with GEF4 Graphics and JavaFX

6

Inspired by a phone call with Alexander Nyssen and a Forum post by Tom Schindl I started playing around with a GEF4 AbstractGraphics implementation using a JavaFX 2.2 canvas. GEF4 nicely separates the presentation model from the UI toolkit responsible for the actual rendering, so it was pretty straight forward to develop a JavaFX based implementation. Currently GEF4 provides Java2D (AWT) and SWT renderers. The results using my small JavaFX based renderer look quite nice so far. Here is the “Simple Example” rendered with SWT and JavaFX:

simple-example-1

When you click on the above image to see it in original size you will notice the the red lines look not as crisp in JavaFX compared to SWT. That is because in JavaFX all coordinates are expressed as double values and the shapes are positioned computing the exact middle position of the edges by default. In practice that means that a red line with thickness 1 drawn from (10:10) to (20:10) would be rendered as pink line with a line width of 2 pixels. A workaround is to take the line thicknesses into account and draw the line from (10:9.5) to (20:9.5). Then the line will be painted crisp. Actually the HTML5 canvas implementation does exactly the same. In the demo, I just had to add javaFxGraphics.translate(0.5, 0.5); at the beginning of the demo, then the result looks like:

simple-example-2

Again, click on the image to see the original sizes. The FillModesDemo looks almost the same when you compare the SWT with the JavaFX version:

fill-modes

Currently I am trying to get the JavaFX clipping working in a canvas, don’t know yet why it is not working out of the box… For me it would be great to see graphical editors in e4 and JavaFX based apps in the future. In the next weeks I will polish my implementation and contribute it to GEF4, if there is any interest.

Stay tuned

Kai

You find me on Twitter and Google+.
Interested in Eclipse 4 Application Platform trainings?

6 Comments

  1. Tom Schindl03-11-2013

    I guess you implemented this on top if JavaFX-Canvas element which is what I did as well back then. I’d like to see an implementation built upon the SceneGraph which is more powerful.

    I think implementing graphical editors with plain JavaFX is also quite easy when done with the SceneGraph because you don’t have to deal with all the picking, … because JavaFX does that implicitly. Just my 2cents ūüėČ

  2. Kai Tödter03-11-2013

    @Tom Schindl
    yes, I started with canvas but I will also try creating a scene graph and compare the two approaches.

    >I think implementing graphical editors with plain JavaFX is also quite easy…
    I agree, actually I wanted to take a look at the source code of Scene Builder, but it is not available yet.

  3. Tom Schindl03-11-2013

    Not sure this is still like this but I think GEF4 did all using Paths. This element has the draw back in FX that it is bound to the CPU for calculations. It would be good if simple Shapes line Rectangle are use by GEF because they can be mapped directly to OpenGL/DirectX native constructs.

  4. Tom Schindl03-11-2013

    Just in case Torsten did a first start of gefx framework in https://github.com/tomsontom/e-fx-clipse/tree/gefx

  5. Kai Tödter03-12-2013

    @Tom Schindl
    Cool, I’ll take a look at gefx

  6. Java desktop links of the week, March 18 | Jonathan Giles03-17-2013

    […] Speaking of Eclipse, Kai T√∂dter has blogged about his experiments with GEF4 graphics being rendered using JavaFX Canvas. […]

Leave a Reply