Drawing things

Everything · Post by **Everything** » Tue Oct 08, 2019 1:26 pm

There are some questions on drawing.
First question - let's say we need to draw a down arrow icon with good quality (anti-aliasing)

here is a large version of the icon and the desired result below (round-keyboard_arrow_down-24px.svg)
The most reliable but not the most convenient way is to use the font icon (what I am doing right now) but maybe it is possible to generate an icon with the drawing with the same quality?
Vector drawing by default gives a terrible result for small object sizes, so probably it can't be done without image resize hacks etc I don't know for sure.

Second question - Is there a way without creating a new window on top of the current one, temporarily draw a translucent circle on top of existing gadgets (canvases) so that there are no update conflicts?
Or new window it's the best choice?

STARGÅTE · Post by **STARGÅTE** » Tue Oct 08, 2019 1:45 pm

Vector Drawing look fine for me:

Code: Select all

Enumeration
	#Window
	#Gadget
EndEnumeration


Procedure UpdateCanvasGadget(Gadget.i)
	
	If StartVectorDrawing(CanvasVectorOutput(Gadget))
		
		VectorSourceColor(RGBA(62,67,72,255))
		FillVectorOutput()
		
		TranslateCoordinates(100, 170)
		AddPathSegments("M -6 -3 l 6 6 l 6 -6")
		VectorSourceColor(RGBA(97,101,105,255))
		StrokePath(2, #PB_Path_RoundEnd|#PB_Path_RoundCorner)
		
		TranslateCoordinates(0, -80)
		ScaleCoordinates(10, 10)
		AddPathSegments("M -6 -3 l 6 6 l 6 -6")
		VectorSourceColor(RGBA(97,101,105,255))
		StrokePath(3, #PB_Path_RoundEnd|#PB_Path_RoundCorner)
		
		StopVectorDrawing()
	EndIf
	
EndProcedure


OpenWindow(#Window, 0, 0, 200, 200, "Vector Canvas Gadget", #PB_Window_MaximizeGadget|#PB_Window_MaximizeGadget|#PB_Window_SizeGadget|#PB_Window_ScreenCentered)
CanvasGadget(#Gadget, 0, 0, WindowWidth(#Window), WindowHeight(#Window), #PB_Canvas_Keyboard)
UpdateCanvasGadget(#Gadget)

Repeat
	
	Select WaitWindowEvent()
		
		Case #PB_Event_CloseWindow
			Break
		
	EndSelect
	
ForEver

End

Everything · Post by **Everything** » Tue Oct 08, 2019 2:13 pm

STARGÅTE wrote:Vector Drawing look fine for me

You are right, thx. Strange, but the last time I tried to draw small icons with a vector, they didn’t look very good.

BTW since we cannot use swg images directly (I really miss this feature), maybe there is some kind of converter svg-->PB code (they have a fairly similar structure)?

And what about second question about overlapping.

STARGÅTE · Post by **STARGÅTE** » Tue Oct 08, 2019 3:23 pm

Everything wrote:BTW since we cannot use swg images directly (I really miss this feature), maybe there is some kind of converter svg-->PB code (they have a fairly similar structure)?

I have started to write a module to do this:Scalable Vector Graphics (SVG) in PureBasic benutzen?
Include and example: VectorGraphic.pbi
Unfortunately, I did not manage to continue writing, but maybe the latest features are enough for you.

Mistrel · Post by **Mistrel** » Wed Oct 09, 2019 3:48 am

The native library for vector drawing doesn't work as expected when combined with alpha transparency:

viewtopic.php?f=13&t=73684

I've heard that this isn't a problem with PureSVG.

Everything · Post by **Everything** » Thu Oct 10, 2019 11:59 am

STARGÅTE wrote:maybe the latest features are enough for you

Tested with the svg from the first post

unfortunately the result looks distorted

And about my second question.
If we use Canvas (with #HWND_TOP z-order) + BitBlt_ for grab bg content + draw alpha circle, we must place it in callback in case any underlying gadgets changes and I don't like that variant.
What about imagegadget alpha support?

I’ll clarify the problem a bit - we need to temporarily display a translucent circle intersecting (overlapping) with several canvases (with dynamically updated content).

STARGÅTE · Post by **STARGÅTE** » Thu Oct 10, 2019 1:31 pm

Everything wrote:
STARGÅTE wrote:maybe the latest features are enough for you
Tested with the svg from the first post

unfortunately the result looks distorted

Please use the latest version of Pure Basic (5.71). In older versions AddPathSegments() was faulty.

I can't answer your second question.

RASHAD · Post by **RASHAD** » Thu Oct 10, 2019 2:55 pm

Maybe

Code: Select all

Procedure WndProc(hwnd, uMsg, wParam, lParam)
 result = #PB_ProcessPureBasicEvents
 Select uMsg                                       
  Case #WM_NCACTIVATE
      Result = 1 
      
  Case #WM_SIZE,#WM_MOVE
    ResizeWindow(10,WindowX(0,#PB_Window_InnerCoordinate)+90 ,WindowY(0,#PB_Window_InnerCoordinate)+80, 220,220)
 
 EndSelect   
ProcedureReturn result 
EndProcedure


LoadFont(0,"Tahoma",14)
OpenWindow(0,0,0,400,400,"",#PB_Window_SystemMenu | #PB_Window_ScreenCentered)
CanvasGadget(0,10,150,120,100)
CanvasGadget(1,270,150,120,100)
StartDrawing(CanvasOutput(0))
DrawingMode(#PB_2DDrawing_Transparent)
  Box(0, 0, 120, 100, #Yellow )
  DrawingFont(FontID(0))
  DrawText(10,40,"TEST.....#1",#Blue)
StopDrawing()
StartDrawing(CanvasOutput(1))
DrawingMode(#PB_2DDrawing_Transparent)
  Box(0, 0, 120, 100, #Green )
  DrawingFont(FontID(0))
  DrawText(10,40,"TEST #2",#Black)
StopDrawing()
OpenWindow(10,0,0,220,220,"",#PB_Window_BorderLess | #PB_Window_ScreenCentered,WindowID(0))
SetWindowColor(10,#Red)
SetWindowLongPtr_(WindowID(10) ,#GWL_EXSTYLE,GetWindowLongPtr_(WindowID(10), #GWL_EXSTYLE)|#WS_EX_LAYERED) 
SetLayeredWindowAttributes_(WindowID(10),0,100,#LWA_ALPHA)

hRgn = CreateEllipticRgn_(0,0,220,220)
SetWindowRgn_(WindowID(10),hRgn,1)

SetActiveWindow(0)
SetWindowCallback(@WndProc())

Repeat:Until WaitWindowEvent()=#PB_Event_CloseWindow

Everything · Post by **Everything** » Thu Oct 10, 2019 3:15 pm

RASHAD wrote:Maybe

Everything wrote:Second question - Is there a way without creating a new window on top of the current one

Unfortunately WS_EX_LAYERED does not always work (This style is DWM dependent, and also there is bugs in the Aero implementation on Windows up to 8, not sure about 10), that's why I'm looking for a way to avoid creating a window.

Everything · Post by **Everything** » Thu Oct 10, 2019 3:43 pm

Looks like ImageGadget is not an option...

Code: Select all


Global F = LoadFont(0, "Arial", 28) 
Global W.u 
Global H.u 

Procedure D2()
  ;Protected
  If StartDrawing(CanvasOutput(0))

    DrawingMode(#PB_2DDrawing_XOr)
    ;Box(0,0, W, H, #Blue)
    Box(0,0, W, H, #Red)
    ;Box(0,0, W, H, $0061BDFF)

    StopDrawing()
  EndIf

  ;Procedurereturn
EndProcedure

Procedure SetGadgetZOrder(gadget, zorder=0)
; Correct the z-order and draw order for [potentially] overlapping gadgets
; Call with zorder=0 just after creating each gadget
; Call with zorder=1 to later bring a gadget to the top of the z-order
; Call with zorder=-1 to later bring a gadget to the bottom of the z-order
; www.purebasic.fr/english/viewtopic.php?t=28802
If zorder=0
  SetWindowLong_(GadgetID(gadget),#GWL_STYLE,GetWindowLong_(GadgetID(gadget),#GWL_STYLE)|#WS_CLIPSIBLINGS)
EndIf
If zorder>=0
  SetWindowPos_(GadgetID(gadget),#HWND_TOP,0,0,0,0,#SWP_NOSIZE|#SWP_NOMOVE)
Else
  SetWindowPos_(GadgetID(gadget),#HWND_BOTTOM,0,0,0,0,#SWP_NOSIZE|#SWP_NOMOVE)
EndIf
EndProcedure

If OpenWindow(0, 0, 0, 420, 420, "", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  CanvasGadget(0, 30, 30, 400, 400)
  
  Text.s = "TEXT"
  ;Text.s = "T"
  
  If StartDrawing(CanvasOutput(0))
    DrawingFont(F)
    Global W.u = TextWidth(Text)
    Global H.u = TextHeight(Text)
    StopDrawing()
  EndIf
  ResizeGadget(0, 30, 30, W, H)
  hDC = StartDrawing(CanvasOutput(0))
  If hDC
    DrawingFont(F)
    Box(0,0, W, H, $00D355BA)
    BackColor($00D355BA)
    ;Debug GetTextAlign_(hDC)
    SetTextAlign_(hDC, #TA_CENTER)
    ;Debug GetTextAlign_(hDC)
    DrawText(0,0,Text, RGB(255, 255, 0))
    StopDrawing()
  EndIf
  
  CanvasGadget(1, W*2, 30, W, H, #PB_Canvas_Container) 
  SetGadgetColor (1, #PB_Gadget_BackColor, #Blue)
  CloseGadgetList()
  
  CreateImage(0, 150,150, 32, #PB_Image_Transparent)
  If StartDrawing(ImageOutput(0))
    DrawingMode(#PB_2DDrawing_AlphaBlend)
    Circle(75,75, 75, RGBA(255, 255, 0, 100))
    StopDrawing()
  EndIf 
  
  ImageGadget(2, 30+W/2, 0, 150, 150, ImageID(0))
  ;SetGadgetColor (2, #PB_Gadget_BackColor, #Red)
  SetGadgetZOrder(0, 0)
  SetGadgetZOrder(1, 0)
  SetGadgetZOrder(2, 1)
  
  
  
  ;HideGadget(2,1)
  
  SetTimer_(WindowID(0), 2, 900, @D2() )
  Repeat
    Event = WaitWindowEvent()
    
    If Event = #PB_Event_Gadget And EventGadget() = 0 
      ;If EventType() = #PB_EventType_LeftButtonDown 
        ;t.q = ElapsedMilliseconds()
          ;D2()
        ;ElseIf EventType() = #PB_EventType_RightButtonDown
          ;HideGadget(2,0)
      ;EndIf
    EndIf    
    
  Until Event = #PB_Event_CloseWindow
EndIf

callback still required to redraw underlying canvas part...

RASHAD · Post by **RASHAD** » Fri Oct 11, 2019 10:53 am

Code: Select all

Global F = LoadFont(0, "Arial", 28)
Global W.u
Global H.u

Procedure D2()
  ;FreeGadget(2)
  If StartDrawing(CanvasOutput(0))
    DrawingMode(#PB_2DDrawing_XOr)
    ;Box(0,0, W, H, #Blue)
    Box(0,0, W, H, #Red)
    ;Box(0,0, W, H, $0061BDFF)

    StopDrawing()
  EndIf
  SetGadgetState(2,ImageID(0))
 ;ImageGadget(2, 30+W/2, 0, 150, 150, ImageID(0))
  ;Procedurereturn
EndProcedure

If OpenWindow(0, 0, 0, 420, 420, "", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  CanvasGadget(0, 30, 30, 400, 400)
 
  Text.s = "TEXT"
  ;Text.s = "T"
 
  If StartDrawing(CanvasOutput(0))
    DrawingFont(F)
    Global W.u = TextWidth(Text)
    Global H.u = TextHeight(Text)
    StopDrawing()
  EndIf
  ResizeGadget(0, 30, 30, W, H)
  hDC = StartDrawing(CanvasOutput(0))
  If hDC
    DrawingFont(F)
    Box(0,0, W, H, $00D355BA)
    BackColor($00D355BA)
    ;Debug GetTextAlign_(hDC)
    SetTextAlign_(hDC, #TA_CENTER)
    ;Debug GetTextAlign_(hDC)
    DrawText(0,0,Text, RGB(255, 255, 0))
    StopDrawing()
  EndIf
 
  CanvasGadget(1, W*2, 30, W, H, #PB_Canvas_Container)
  SetGadgetColor (1, #PB_Gadget_BackColor, #Blue)
  CloseGadgetList()
 
  CreateImage(0, 150,150, 32, #PB_Image_Transparent)
  If StartDrawing(ImageOutput(0))
    DrawingMode(#PB_2DDrawing_AlphaBlend)
    Circle(75,75, 75, RGBA(255, 255, 0, 100))
    StopDrawing()
  EndIf
 
  ImageGadget(2, 30+W/2, 0, 150, 150, ImageID(0))
 
  SetTimer_(WindowID(0), 2, 900, @D2() )
  Repeat
    Event = WaitWindowEvent()
   
    If Event = #PB_Event_Gadget And EventGadget() = 0
      ;If EventType() = #PB_EventType_LeftButtonDown
        ;t.q = ElapsedMilliseconds()
          ;D2()
        ;ElseIf EventType() = #PB_EventType_RightButtonDown
          ;HideGadget(2,0)
      ;EndIf
    EndIf   
   
  Until Event = #PB_Event_CloseWindow
EndIf

Everything · Post by **Everything** » Thu Oct 17, 2019 8:10 am

STARGÅTE wrote:Please use the latest version of Pure Basic (5.71). In older versions AddPathSegments() was faulty.

Thx! With 5.71 everything is ok. If 'VectorGraphic' had a box with the resulting PB code, it would be just perfect

However it is good as is.

RASHAD, Thx! Nice and clean!

PureBasic Forums - English

Drawing things

Drawing things

Re: Drawing things

Re: Drawing things

Re: Drawing things

Re: Drawing things

Re: Drawing things

Re: Drawing things

Re: Drawing things

Re: Drawing things

Re: Drawing things

Re: Drawing things

Re: Drawing things