2

I'm making two squares as seen in the following image.One red and one blue square

The yellow circle is not part of the image, but it shows some pixels that I'm expecting to not be there. I have no experience with computer graphics, but from what I've read in the documentation, these pixels should not be there. Do I have unrealistic expectations or am I doing something wrong to get these 'overflow' pixels as shown by the yellow circle in my above drawing?

Here is the code that generates the boxes.

     #lang racket/gui

(define dc (new svg-dc%  
                [width 64]
                [height 64]
                [output "boxes.svg"]
                [exists 'replace]))
(send dc start-doc "boxes.svg")
(send dc start-page)

        (define old-brush (send dc get-brush))
        (define old-pen (send dc get-pen))
        (send dc set-brush 
          (new brush% [style 'solid]
                      [color "White"]))
        (send dc set-pen 
          (new pen% [width 0]
                    [color "Black"]
                    [cap 'butt]
                    [join 'miter]))
        (send dc set-pen old-pen)
        (send dc set-brush old-brush)   

        (send dc set-pen
          (new pen% [width 0]
                    [color "Black"]
                    [cap 'butt]
                    [join 'miter]))
        (send dc set-brush 
          (new brush% [style 'solid]
                      [color "Red"]))
        (define path (new dc-path%))
        (send path move-to 0 0)
        (send path line-to 10 0)
        (send path line-to 10 10)
        (send path line-to 0 10)
        (send path close)
        (send dc draw-path path 0 0)
        (send dc set-pen old-pen)
        (send dc set-brush old-brush)

        (send dc set-pen 
          (new pen% [width 0]
                    [color "Black"]
                    [cap 'butt]
                    [join 'miter]))
        (send dc set-brush
          (new brush% [style 'solid]
                      [color "Blue"]))
        (define path2 (new dc-path%))
        (send path2 move-to 0 0)
        (send path2 line-to 10 0)
        (send path2 line-to 10 10)
        (send path2 line-to 0 10)
        (send path2 close)
        (send dc draw-path path2 10 0)
        (send dc set-pen old-pen)
        (send dc set-brush old-brush)

(send dc end-page)
(send dc end-doc)
  • Can you post a complete example, we can try? – soegaard Dec 08 '20 at 11:26
  • I have updated the post so that one can copy and paste the code portion to generate the image. I have not yet tried the suggestions in the answers section, but I will attempt them soon when time permits. – user14154386 Dec 09 '20 at 13:30

1 Answers1

1

This is just a comment, but I needed some more space.

Things to look out for:

anti aliasing  - turn it of
smoothing      - is the mode unsmoothed or aligned?

Let's say the first pixel has opposite corners (0,0) and (1,1). Without aligment, you can choose a square pen of size and make a dot at (0.5,0.5) in order not to draw outside the pixel.

If things are aligned, you need to adjust accordingly.

See set-smoothing.

https://docs.racket-lang.org/draw/dc___.html#%28meth._%28%28%28lib._racket%2Fdraw..rkt%29._dc~3c~25~3e%29._set-smoothing%29%29

UPDATE

As far as I can tell, adding the line:

(send dc set-smoothing 'aligned)

at the beginning will fix the problem.

soegaard
  • 30,661
  • 4
  • 57
  • 106
  • Initially tested (send dc set-smoothing 'unsmoothed) because 'smoothed and 'aligned are smoothing modes that enable anti-aliasing, but unfortunately, the output was the same. The same output occurred when I tested the 'aligned mode, but the smudge seemed to go away when I tested the output while using the 'smoothed mode; that is, (send dc set-smoothing 'smoothed) fixed the issue. Can you share some ideas as to why an anti-aliased mode helped? What are some keywords to search to find an introduction to anti-aliasing (recall, beginner to computer graphics, but I am not afraid of mathematics.) – user14154386 Dec 09 '20 at 13:54
  • 1
    Since you were talking about pixels, I was expecting you to draw on a bitmap (or canvas) and then save as, say png. For SVG which is a vector format, I am a bit unsure whether antialaising has an effect. Suppose you want to draw a line from point A to B with a non-zero slope. If you zoom in, you will se a stair case effect. Filling in the stair case with grey pixels will create the illusion of a smoother line. See https://www.youtube.com/watch?v=R3AgvpOA2qw – soegaard Dec 09 '20 at 14:00