Clean edges

erin_jamroz · April 20, 2016, 3:39pm

I am drawing some objects on a mac with retina. Specifically, I am trying to draw roundRects with a gradient, so I am using pictures and masks. Here is the code in the canvas paint event:

[code] dim startcolor as Color = &cA1A19900
dim endColor as color = &c6A696900
dim samt,eamt as Double

dim p as new picture(g.Width, g.Height, 32)

//SET MASK
p.mask.Graphics.ForeColor = &cFFFFFF00
p.mask.Graphics.FillRect(0, 0,g.Width, g.Height)
p.mask.Graphics.ForeColor = &c00000000
p.mask.Graphics.FillRoundRect(0, 0,g.Width, g.Height,10,10)

//SET GRADIENT
For i As Integer = 0 to p.Height
samt = 1 - (i / p.Height)
eamt = i / p.Height
p.Graphics.ForeColor = RGB((startColor.Red * samt) + (endColor.Red * eamt), _
(startColor.Green *samt) + (endColor.Green * eamt), _
(startColor.Blue * samt) + (endColor.Blue * eamt))

p.Graphics.DrawLine(0, i, p.Width, i)

Ulrich_Bogun · April 20, 2016, 3:48pm

This could be a problem of the render quality. Without a declare or plug-in, Xojo uses the default which is a compromise between speed and quality. Search the forum for the declare; I am sure it is around here where CGContext (= Graphics) drawing routines are discussed.

DaveS · April 20, 2016, 3:52pm

this may be what you are looking for

  #If TargetMacOS Then
    Dim Interpolation_Mode As Integer
    // provided by Sam Rowlands
    Const kCGInterpolationDefault = 0
    Const kCGInterpolationNone = 1
    Const kCGInterpolationLow = 2
    Const kCGInterpolationMedium = 4
    Const kCGInterpolationHigh = 3
    //
    Interpolation_Mode=kCGInterpolationNone
    //If w2>w1 Or h2>h1 Then Interpolation_Mode=kCGInterpolationMedium ' reduced images
    //
    Interpolation_Mode=2
    Declare Sub CGContextSetInterpolationQuality Lib "Cocoa" ( context As Integer, quality As Integer )
    CGContextSetInterpolationQuality( g.handle( g.HandleTypeCGContextRef ), Interpolation_Mode )
    //
  #EndIf

erin_jamroz · April 20, 2016, 4:01pm

Dave,
I have inserted you code in the paint event, but changing the Interpolation_Mode has no effect on the outcome of the image that is drawn…

DaveS · April 20, 2016, 4:03pm

you did insert this code just PRIOR to the drawpicture event?
if can’t be global… it must alter the “graphics” object just prior to its use.

and to be fair… its Sam Rowlands code, not mine

and in your code (above)… “G” would p.Graphics I believe

erin_jamroz · April 20, 2016, 4:09pm

Correction, Sam’s code
Here is my paint event:

[code] dim startcolor as Color = &cA1A19900
dim endColor as color = &c6A696900
dim samt,eamt as Double

dim p as new picture(g.Width, g.Height, 32)

//SET MASK
p.mask.Graphics.ForeColor = &cFFFFFF00
p.mask.Graphics.FillRect(0, 0,g.Width, g.Height)
p.mask.Graphics.ForeColor = &c00000000
p.mask.Graphics.FillRoundRect(0, 0,g.Width, g.Height, 15, 15)

//SET GRADIENT
For i As Integer = 0 to p.Height
samt = 1 - (i / p.Height)
eamt = i / p.Height
p.Graphics.ForeColor = RGB((startColor.Red * samt) + (endColor.Red * eamt), _
(startColor.Green *samt) + (endColor.Green * eamt), _
(startColor.Blue * samt) + (endColor.Blue * eamt))

p.Graphics.DrawLine(0, i, p.Width, i)

#If TargetMacOS Then
Dim Interpolation_Mode As Integer
// provided by Sam Rowlands
Const kCGInterpolationDefault = 0
Const kCGInterpolationNone = 1
Const kCGInterpolationLow = 2
Const kCGInterpolationMedium = 4
Const kCGInterpolationHigh = 3

Interpolation_Mode=kCGInterpolationHigh
Declare Sub CGContextSetInterpolationQuality Lib "Cocoa" ( context As Integer, quality As Integer )
CGContextSetInterpolationQuality(g.handle(g.HandleTypeCGContextRef ), Interpolation_Mode )
//

#EndIf

g.drawpicture(p, 0, 0)[/code]

DaveS · April 20, 2016, 4:13pm

try this

 dim startcolor as Color = &cA1A19900
  dim endColor as color = &c6A696900
  dim samt,eamt as Double
dim pg as graphics // <------ ADDED
  
  dim p as new picture(g.Width, g.Height, 32)
  
  //SET MASK
  p.mask.Graphics.ForeColor = &cFFFFFF00
  p.mask.Graphics.FillRect(0, 0,g.Width, g.Height)
  p.mask.Graphics.ForeColor = &c00000000
  p.mask.Graphics.FillRoundRect(0, 0,g.Width, g.Height, 15, 15)
  
  //SET GRADIENT 
pg=p.graphics // <----- ADDED

 #If TargetMacOS Then
    Dim Interpolation_Mode As Integer
    // provided by Sam Rowlands
    Const kCGInterpolationDefault = 0
    Const kCGInterpolationNone = 1
    Const kCGInterpolationLow = 2
    Const kCGInterpolationMedium = 4
    Const kCGInterpolationHigh = 3

    Interpolation_Mode=kCGInterpolationHigh
    Declare Sub CGContextSetInterpolationQuality Lib "Cocoa" ( context As Integer, quality As Integer )
    CGContextSetInterpolationQuality(pg.handle(pg.HandleTypeCGContextRef ), Interpolation_Mode ) // <--- USE PG not G

  #EndIf



  For i As Integer = 0 to p.Height
    samt = 1 - (i / p.Height)
    eamt = i / p.Height
  pg.ForeColor = RGB((startColor.Red * samt) + (endColor.Red * eamt), _
    (startColor.Green *samt) + (endColor.Green * eamt), _
    (startColor.Blue * samt) + (endColor.Blue * eamt))
    
pg.DrawLine(0, i, p.Width, i)
    
  Next

  g.drawpicture(p, 0, 0)

DaveS · April 20, 2016, 4:15pm

actually, you may need to apply this interpolation to the MASK, not the image now that I think about it
but it needs to be done, BEFORE you draw anything on it.

erin_jamroz · April 20, 2016, 4:22pm

I was working on that when I saw your post, I even applied to to both just to see. Unfortunately, no change…

[code] dim startcolor as Color = &cA1A19900
dim endColor as color = &c6A696900
dim samt,eamt as Double
dim pg as graphics // <------ ADDED
dim pmg as Graphics

dim p as new picture(g.Width, g.Height, 32)

//SET GRADIENT
pg=p.graphics // <----- ADDED
pmg = p.mask.graphics

#If TargetMacOS Then
Dim Interpolation_Mode As Integer
// provided by Sam Rowlands
Const kCGInterpolationDefault = 0
Const kCGInterpolationNone = 1
Const kCGInterpolationLow = 2
Const kCGInterpolationMedium = 4
Const kCGInterpolationHigh = 3

Interpolation_Mode=kCGInterpolationHigh
Declare Sub CGContextSetInterpolationQuality Lib "Cocoa" ( context As Integer, quality As Integer )
CGContextSetInterpolationQuality(pg.handle(pg.HandleTypeCGContextRef ), Interpolation_Mode ) // <--- USE PG not G
CGContextSetInterpolationQuality(pmg.handle(pmg.HandleTypeCGContextRef ), Interpolation_Mode )

#EndIf

//SET MASK
pmg.ForeColor = &cFFFFFF00
pmg.FillRect(0, 0,g.Width, g.Height)
pmg.ForeColor = &c00000000
pmg.FillRoundRect(0, 0,g.Width, g.Height, 15, 15)

For i As Integer = 0 to p.Height
samt = 1 - (i / p.Height)
eamt = i / p.Height
pg.ForeColor = RGB((startColor.Red * samt) + (endColor.Red * eamt), _
(startColor.Green *samt) + (endColor.Green * eamt), _
(startColor.Blue * samt) + (endColor.Blue * eamt))

pg.DrawLine(0, i, p.Width, i)

Will_Shank · April 20, 2016, 6:08pm

I don’t have retina to test but I think the problem is a Picture only has the pixels you request. This line creates WidthxHeight pixels for a non-retina size.

dim p as new picture(g.Width, g.Height, 32)

Drawing that picture with interpolation still doesn’t have that extra retina resolution. Plus I don’t think you want to interpolate when drawing at size.

Anyways, try making the Picture twice as big (so it has retina number of pixels) but draw it scaled down into the same size, so retina pixels in the same space.

dim p as new picture(g.Width*2, g.Height*2, 32) //... g.drawpicture(p, 0, 0, g.Width, g.Height, 0, 0, p.Width, p.Height)

erin_jamroz · April 20, 2016, 9:06pm

Will
Thank you so much, that fixed the problem!
Good to know about how pictures and their number of pixels.

Norman_P · April 20, 2016, 9:16pm

welcome to the wonderful world of supporting retina & hidpi

Sam_Rowlands · April 21, 2016, 2:12pm

Huh… What… I didn’t do it, no-one saw me do it, you can’t prove a thing…

Sam_Rowlands · April 21, 2016, 2:14pm

It could be easier… Read More to find out how a housewife makes $3,000,000,000 an hour, with a mobile phone, toilet paper tube, PVA glue and some sticky backed plastic.

erin_jamroz · April 27, 2016, 6:13am

Ok, so everything was working great with drawing roundRecs using masks etc, but I am now trying to only do the drawing once and store the image as the canvas backdrop so I dont have to keep redrawing it…
The only problem is now I dont have a graphics object to call .drawPicture on unless I create a new picture object for the backdrop property, but then I run into the same scaling issue where I will only have half as many pixels as I need, and I cant just say self.backdrop = p because p is 2 times as big as I need…

Any thoughts there?

Jeff_Tullin · April 27, 2016, 6:17am

Don’t.
Store it as a picture variable at the double size, and use myvariable.drawpicture in the Paint event.

erin_jamroz · April 27, 2016, 2:19pm

That doesn’t solve the problem of not redrawing it on every canvas refresh…

Will_Shank · April 27, 2016, 9:03pm

Another way to draw the 2x picture crisply is to set it’s Vertical and HorizontalResolution to 144. Then you don’t have to do the scaling in the draw, it’s just g.DrawPicture(mypic, x, y) and it’s crisp. Unfortunately this doesn’t work in the Backdrop (I don’t know if this is a bug).

What is working is to create an ‘Image’ Picture. For example, I put a 100x100 Canvas on a Window and put this in Canvas.Open

[code]Sub Open()

dim p As new Picture(200, 200)
p.Graphics.ForeColor = &c00FF00
p.Graphics.FillOval(0, 0, 200, 200)

dim img As new Picture(100, 100, Array(p))

me.Backdrop = img

End Sub[/code]

Notice p is created at 200x200 pixels but img is 100x100 points. This is enough to work, you don’t even need to set the V/H Resolution of p. img knows it’s supposed to fill the area 100x100 points and since it’s only bitmap is 200x200 pixels that gets drawn in the 100x100 point area.

Julen_I · April 27, 2016, 9:08pm

Doesn’t the canvas refresh involve the redrawing anyway? including the backdrop.

And what is the problem you have with the redrawing?

Julen

erin_jamroz · April 27, 2016, 10:42pm

Will, I will have to give this a shot.

The problem is that I am creating custom controls (many of which have a gradient) that need to be scroll-able across a window. When the window has a few of these controls and needs to scroll, all of the redrawing is slowing down the scroll pretty bad. I did not know if the backdrop got redrawn, I was hoping it didn’t.

Graphics are not my strong suit…