Drawing things
-
- Enthusiast
- Posts: 224
- Joined: Sat Jul 07, 2018 6:50 pm
Drawing things
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?
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?
Re: Drawing things
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
PB 6.01 ― Win 10, 21H2 ― Ryzen 9 3900X, 32 GB ― NVIDIA GeForce RTX 3080 ― Vivaldi 6.0 ― www.unionbytes.de
Lizard - Script language for symbolic calculations and more ― Typeface - Sprite-based font include/module
Lizard - Script language for symbolic calculations and more ― Typeface - Sprite-based font include/module
-
- Enthusiast
- Posts: 224
- Joined: Sat Jul 07, 2018 6:50 pm
Re: Drawing things
You are right, thx. Strange, but the last time I tried to draw small icons with a vector, they didn’t look very good.STARGÅTE wrote:Vector Drawing look fine for me
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.
Re: Drawing things
I have started to write a module to do this:Scalable Vector Graphics (SVG) in PureBasic benutzen?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)?
Include and example: VectorGraphic.pbi
Unfortunately, I did not manage to continue writing, but maybe the latest features are enough for you.
Last edited by STARGÅTE on Thu Apr 09, 2020 6:01 pm, edited 1 time in total.
PB 6.01 ― Win 10, 21H2 ― Ryzen 9 3900X, 32 GB ― NVIDIA GeForce RTX 3080 ― Vivaldi 6.0 ― www.unionbytes.de
Lizard - Script language for symbolic calculations and more ― Typeface - Sprite-based font include/module
Lizard - Script language for symbolic calculations and more ― Typeface - Sprite-based font include/module
Re: Drawing things
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.
viewtopic.php?f=13&t=73684
I've heard that this isn't a problem with PureSVG.
-
- Enthusiast
- Posts: 224
- Joined: Sat Jul 07, 2018 6:50 pm
Re: Drawing things
Tested with the svg from the first postSTARGÅTE wrote:maybe the latest features are enough for you
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).
Re: Drawing things
Please use the latest version of Pure Basic (5.71). In older versions AddPathSegments() was faulty.Everything wrote:Tested with the svg from the first postSTARGÅTE wrote:maybe the latest features are enough for you
unfortunately the result looks distorted
I can't answer your second question.
PB 6.01 ― Win 10, 21H2 ― Ryzen 9 3900X, 32 GB ― NVIDIA GeForce RTX 3080 ― Vivaldi 6.0 ― www.unionbytes.de
Lizard - Script language for symbolic calculations and more ― Typeface - Sprite-based font include/module
Lizard - Script language for symbolic calculations and more ― Typeface - Sprite-based font include/module
Re: Drawing things
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
Egypt my love
-
- Enthusiast
- Posts: 224
- Joined: Sat Jul 07, 2018 6:50 pm
Re: Drawing things
RASHAD wrote:Maybe
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 wrote:Second question - Is there a way without creating a new window on top of the current one
-
- Enthusiast
- Posts: 224
- Joined: Sat Jul 07, 2018 6:50 pm
Re: Drawing things
Looks like ImageGadget is not an option...
callback still required to redraw underlying canvas part...
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
Re: Drawing things
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
Egypt my love
-
- Enthusiast
- Posts: 224
- Joined: Sat Jul 07, 2018 6:50 pm
Re: Drawing things
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.STARGÅTE wrote:Please use the latest version of Pure Basic (5.71). In older versions AddPathSegments() was faulty.
RASHAD, Thx! Nice and clean!