Texte + image Gradient

Vous débutez et vous avez besoin d'aide ? N'hésitez pas à poser vos questions
Avatar de l’utilisateur
Shadow
Messages : 1428
Inscription : mer. 04/nov./2015 17:39

Texte + image Gradient

Message par Shadow »

Salut,

Comment ont fais pour créer des texte et des Image Gradient ?

Dans l'aide de PB dans DrawingMode(), ya un belle exemple de texte Gradient.
C'est dommage qu'il n'y est pas d'exemple pour faire ça dans l'aide.
AMD Ryzen 5 3600 (6 cœurs / 12 threads, Socket AM4)
Gainward GeForce RTX 3070 (8 GB GDDR6)
ASUS PRIME A320M-K (chipset AMD A320)
64 GB DDR4-3200
Asus 24 Pouces: 1920 x 1080.
Système: Windows 10 64 Bits.

PureBasic: 6.30 beta 4 x64 Bits.
Avatar de l’utilisateur
falsam
Messages : 7344
Inscription : dim. 22/août/2010 15:24
Localisation : IDF (Yvelines)
Contact :

Re: Texte + image Gradient

Message par falsam »

Dans l'aide de PB dans DrawingMode(), ya un belle exemple de texte Gradient.
et dans la même phrase
C'est dommage qu'il n'y est pas d'exemple pour faire ça dans l'aide.
Ben tu vois j'ai quand même compris ce que tu voulais dire :mrgreen:

Tu as vu le texte en dégradé dans l'aide mais pas le code correspondant.

Méthode simple : Un texte radiant avec deux couleurs

On va choisir deux couleurs et effectuer un dégrader de gauche à droite avec la fonction LinearGradient(x1, y1, x2, y2)

Code : Tout sélectionner

If OpenWindow(0, 0, 0, 800, 600, "Alphachannel demo", #PB_Window_SystemMenu|#PB_Window_ScreenCentered)
  LoadFont(0, "Impact", 30)
  text$ = "Texte à afficher"
  
  If CreateImage(0, 800, 600, 32) 
    StartDrawing(ImageOutput(0))
    
    ;Calcul largeur et hauteur du texte
    DrawingFont(FontID(0))
    w = TextWidth(Text$)
    h = TextHeight(Text$)
    
    ;Fond blanc
    Box(0, 0, 800, 600, RGB(255, 255, 255))
    
    ;Texte en dégradée Rouge -> Bleu
    DrawingMode(#PB_2DDrawing_Gradient|#PB_2DDrawing_Transparent)
    
    BackColor(RGB(255, 0, 0))
    FrontColor(RGB(0, 0, 255))
    
    ;LinearGradient(x1, y1, x2, y2)  
    LinearGradient(10, 10, w, h)     
    DrawText(10, 10, Text$)    
    
    StopDrawing() 
    
    ImageGadget(0, 0, 0, 400, 200, ImageID(0))
  EndIf
  
  ImageGadget(0, 0, 0, 400, 200, ImageID(0))
  
  Repeat : Until WaitWindowEvent() = #PB_Event_CloseWindow
EndIf
Deuxième méthode : Texte radiant 5 couleurs

Code : Tout sélectionner

If OpenWindow(0, 0, 0, 800, 600, "Alphachannel demo", #PB_Window_SystemMenu|#PB_Window_ScreenCentered)
  LoadFont(0, "Impact", 30)
  text$ = "Texte à afficher"
  
  If CreateImage(0, 800, 600, 32) 
    StartDrawing(ImageOutput(0))
    
    ;Fond transparent
    DrawingMode(#PB_2DDrawing_AlphaChannel)
    Box(0, 0, 800, 600, $00000000)
    
    ;Calcul largeur et hauteur du texte
    DrawingFont(FontID(0))
    w = TextWidth(text$)
    h = TextHeight(text$)
        
    DrawingMode(#PB_2DDrawing_AlphaBlend|#PB_2DDrawing_Transparent|#PB_2DDrawing_Gradient)   
    LinearGradient(10, 10, w, h)
    
    ;GradientColor(Position.f, Couleur) Position de 0.00 -> 1.00 
    ;La position de la couleur dans le dégradé
    GradientColor(0.00, RGBA(0, 0, 255, 255)) 
    GradientColor(0.25, RGBA(34, 139, 34, 255))    
    GradientColor(0.50, RGBA(255, 0, 0, 255))
    GradientColor(0.75, RGBA(184, 134, 11, 255))
    GradientColor(1.00, RGBA(0, 0, 0, 255))
    
    DrawText(10, 10, text$)   
    StopDrawing()
  EndIf
  
  ImageGadget(0, 0, 0, 0, 0, ImageID(0))
  
  Repeat : Until WaitWindowEvent() = #PB_Event_CloseWindow
EndIf
Configuration : Windows 11 Famille 64-bit - PB 6.23 x64 - AMD Ryzen 7 - 16 GO RAM
Vidéo NVIDIA GeForce GTX 1650 Ti - Résolution 1920x1080 - Mise à l'échelle 125%
Avatar de l’utilisateur
Shadow
Messages : 1428
Inscription : mer. 04/nov./2015 17:39

Re: Texte + image Gradient

Message par Shadow »

Milles merci, encore Falsam.
AMD Ryzen 5 3600 (6 cœurs / 12 threads, Socket AM4)
Gainward GeForce RTX 3070 (8 GB GDDR6)
ASUS PRIME A320M-K (chipset AMD A320)
64 GB DDR4-3200
Asus 24 Pouces: 1920 x 1080.
Système: Windows 10 64 Bits.

PureBasic: 6.30 beta 4 x64 Bits.
Répondre