Texte + image Gradient

Vous débutez et vous avez besoin d'aide ? N'hésitez pas à poser vos questions
Shadow
Messages : 1413
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.
Processeur: Intel Core I7-4790 - 4 Cœurs - 8 Thread: 3.60 Ghz.
Ram: 32 GB.
Disque: C: SDD 250 GB, D: 3 TB.
Vidéo: NVIDIA GeForce GTX 960: 2 GB DDR5.
Écran: Asus VX248 24 Pouces: 1920 x 1080.
Système: Windows 7 64 Bits.

PureBasic: 5.60 x64 Bits.
Avatar de l’utilisateur
falsam
Messages : 7324
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.20 x64 - AMD Ryzen 7 - 16 GO RAM
Vidéo NVIDIA GeForce GTX 1650 Ti - Résolution 1920x1080 - Mise à l'échelle 125%
Shadow
Messages : 1413
Inscription : mer. 04/nov./2015 17:39

Re: Texte + image Gradient

Message par Shadow »

Milles merci, encore Falsam.
Processeur: Intel Core I7-4790 - 4 Cœurs - 8 Thread: 3.60 Ghz.
Ram: 32 GB.
Disque: C: SDD 250 GB, D: 3 TB.
Vidéo: NVIDIA GeForce GTX 960: 2 GB DDR5.
Écran: Asus VX248 24 Pouces: 1920 x 1080.
Système: Windows 7 64 Bits.

PureBasic: 5.60 x64 Bits.
Répondre