Page 1 of 1

Vector shadow emulation.

Posted: Wed Apr 24, 2024 12:56 pm
by AndyMK
I have been trying to emulate a drop shadow behind a box drawn using vectors. My thought was to use a slightly bigger box behind the main box and apply a gradient to the path but the gradients seem to only work in one direction. I want to apply the gradient perpendicular to the stroke. Is this possible somehow?

Re: Vector shadow emulation.

Posted: Thu Apr 25, 2024 12:03 am
by RASHAD
Hi
Still that trick works fine :mrgreen:
PB 6.10 x64 - Windows 11 x64

Code: Select all

If OpenWindow(0, 0, 0, 400, 200, "VectorDrawing", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
    CanvasGadget(0, 0, 0, 400, 200)
    
    LoadImage(0, #PB_Compiler_Home + "examples/sources/Data/PureBasicLogo.bmp")

    If StartVectorDrawing(CanvasVectorOutput(0))
      StartDrawing(CanvasOutput(0))
        DrawingMode(#PB_2DDrawing_Gradient)      
        BackColor($000000)
        FrontColor($FFFFFF)
      
        BoxedGradient(0, 0, 400, 200)      
        Box(0,0,400,200)
      StopDrawing()
    
      MovePathCursor(30, 30)
      DrawVectorImage(ImageID(0), 255,340,140)
      
          
      StopVectorDrawing()
    EndIf
    
    Repeat
      Event = WaitWindowEvent()
    Until Event = #PB_Event_CloseWindow
  EndIf

Re: Vector shadow emulation.

Posted: Thu Apr 25, 2024 12:20 am
by netmaestro
Fiddled with this for a while until it didn't look too bad to me, see what you think. It could probably be improved:

Code: Select all

OpenWindow(0,0,0,800,600,"",#PB_Window_ScreenCentered|#PB_Window_SystemMenu)
CanvasGadget(0,0,0,1024,800)

StartVectorDrawing(CanvasVectorOutput(0))
  AddPathBox(190,30,470,430)
  VectorSourceColor(RGBA(100,40,0,255))
  FillPath()
  VectorSourceLinearGradient(660, 0, 670, 0)
  VectorSourceGradientColor(RGBA(0,0,0,140), 0.0)
  VectorSourceGradientColor(RGBA(235,235,235,0), 1.0)
  AddPathBox(660,40,10,420)
  FillPath()
  VectorSourceLinearGradient(0, 460, 0, 470)
  VectorSourceGradientColor(RGBA(0,0,0,140), 0.0)
  VectorSourceGradientColor(RGBA(235,235,235,0), 1.0)
  AddPathBox(200,460,460,10)
  FillPath()
  VectorSourceCircularGradient(660,460,10,-5,-5)
  VectorSourceGradientColor(RGBA(0,0,0,200), 0.0)
  VectorSourceGradientColor(RGBA(235,235,235,0), 1.0)
  AddPathBox(660,460,10,10)
  FillPath()
StopVectorDrawing()

Repeat:Until WaitWindowEvent()=#PB_Event_CloseWindow

Re: Vector shadow emulation.

Posted: Thu Apr 25, 2024 12:56 am
by RASHAD
Hi NM
Too many options he can try

Code: Select all

If OpenWindow(0, 0, 0, 400, 200, "VectorDrawing", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
    CanvasGadget(0, 0, 0, 400, 200)
    
    LoadImage(0, #PB_Compiler_Home + "examples/sources/Data/PureBasicLogo.bmp")
    alpha = 5
    x = 10
    If StartVectorDrawing(CanvasVectorOutput(0))
      For x = 0 To 100 Step 2
        alpha = alpha + 10
        trim = 2*x
        MovePathCursor(x,x)
        VectorSourceColor(RGBA(0,0,0, alpha))
        AddPathBox(x,x, 400-trim,200-trim)
        FillPath()
      Next
    
      MovePathCursor(15, 15)
      DrawVectorImage(ImageID(0), 255,370,170)      
          
      StopVectorDrawing()
    EndIf
    
    Repeat
      Event = WaitWindowEvent()
    Until Event = #PB_Event_CloseWindow
  EndIf

Re: Vector shadow emulation.

Posted: Thu Apr 25, 2024 8:25 am
by AndyMK
Thanks guys. I like netmaestro's the most :)