7 Replies Latest reply: Nov 12, 2012 5:10 PM by bouye RSS

    JavaFX Canvas : "fuzzy" lines compared to Swing

    852174
      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
          Check out Shape.setStrokeType().
          • 2. Re: JavaFX Canvas : "fuzzy" lines compared to Swing
            jsmith
            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
              Thank you!

              Regards,
              Rolf
              • 4. Re: JavaFX Canvas : "fuzzy" lines compared to Swing
                852174
                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
                  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
                    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
                      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