This discussion is archived
7 Replies Latest reply: Nov 12, 2012 3:10 PM by bouye RSS

JavaFX Canvas : "fuzzy" lines compared to Swing

852174 Newbie
Currently Being Moderated
Hi,

I would very much like to port my Swing application (that draws on a JComponent) to JavaFX. But to my dismay the JavaFX Canvas does not draw as sharp and thin lines as Swing does.

Lines drawn with the same thickness is noticeably thicker (and "fuzzier") on the JavaFX Canvas than the equivalent Swing lines. I have tested both on Windows (7) and Linux, both 64-bit.

In my JavaFX app, I proceed like this: gc.beginPath() --> gc.moveTo(..) --> gc.lineTo() --> gc.stroke().

Is there a setting or something I am missing?
  • 1. Re: JavaFX Canvas : "fuzzy" lines compared to Swing
    Jeff Martin Newbie
    Currently Being Moderated
    Check out Shape.setStrokeType().
  • 2. Re: JavaFX Canvas : "fuzzy" lines compared to Swing
    jsmith Guru
    Currently Being Moderated
    You need to take into account the coordinate system.

    For further explanation of why this works see the answer to the question below and Node's javadoc:
    http://stackoverflow.com/questions/11881834/what-are-a-lines-exact-dimensions-in-javafx-2
    http://docs.oracle.com/javafx/2/api/javafx/scene/Node.html
    At the device pixel level, integer coordinates map onto the corners and cracks between the pixels and the centers of the pixels appear at the midpoints between integer pixel locations. Because all coordinate values are specified with floating point numbers, coordinates can precisely point to these corners (when the floating point values have exact integer values) or to any location on the pixel. For example, a coordinate of (0.5, 0.5) would point to the center of the upper left pixel on the Stage. Similarly, a rectangle at (0, 0) with dimensions of 10 by 10 would span from the upper left corner of the upper left pixel on the Stage to the lower right corner of the 10th pixel on the 10th scanline. The pixel center of the last pixel inside that rectangle would be at the coordinates (9.5, 9.5).
    import javafx.application.Application;
    import javafx.scene.*;
    import javafx.scene.canvas.*;
    import javafx.stage.Stage;
    
    /** JavaFX Canvas : "fuzzy" lines compared to Swing JavaFX Canvas : "fuzzy" lines compared to Swing */
    public class FuzzyCanvas extends Application {
      public static void main(String[] args) { launch(args); }
        
      @Override public void start(Stage stage) {
        Canvas canvas = new Canvas(50, 50);
        GraphicsContext gc = canvas.getGraphicsContext2D();
        
        gc.beginPath();    // fuzzy line.
        gc.moveTo(10, 30);
        gc.lineTo(20, 30);
        gc.stroke();
        
        gc.beginPath();    // clean line. 
        gc.moveTo(10.5, 39.5);
        gc.lineTo(19.5, 39.5);
        gc.stroke();
        
        stage.setScene(new Scene(new Group(canvas)));
        
        stage.show();
      }
    }
  • 3. Re: JavaFX Canvas : "fuzzy" lines compared to Swing
    852174 Newbie
    Currently Being Moderated
    Thank you!

    Regards,
    Rolf
  • 4. Re: JavaFX Canvas : "fuzzy" lines compared to Swing
    852174 Newbie
    Currently Being Moderated
    Thanks a lot, this solved the issue, I get thin, crisp lines on my JavaFX Canvas!

    Regards,
    Rolf
  • 5. Re: JavaFX Canvas : "fuzzy" lines compared to Swing
    bouye Journeyer
    Currently Being Moderated
    Alternatively, what about setting -fx-stroke-type to something else than "centered"?
    http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html#shape
    Shape
    ...
    CSS Property     Values     Default     Comments
    ...
    -fx-stroke-type     [ inside | outside | centered ]     centered
  • 6. Re: JavaFX Canvas : "fuzzy" lines compared to Swing
    jsmith Guru
    Currently Being Moderated
    Alternatively, what about setting -fx-stroke-type to something else than "centered"?
    You can't style a canvas with css, nor can you set it's strokeType programmatically.
  • 7. Re: JavaFX Canvas : "fuzzy" lines compared to Swing
    bouye Journeyer
    Currently Being Moderated
    Good call,
    Spent too much time with Java2D over the years, I was expecting to be able to directly render a Line (with the proper style set) to a Canvas ' graphic context (like you can render a Shape / Line2D on a Graphics2D ). Looks like you can't.
    Will need to keep somewhere in my head that I need to shift everything by 0.5px.

    Edited by: bouye on Nov 13, 2012 9:10 AM

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points