Discussion :

[SergioMaster]

Bonjour,

Comme Skia va être intégré dans la prochaine version, que je trouve les glyphes des boutons petits et que je n'aime pas trop l'utilisation des collections d'images, je me suis dit qu'un "bouton" avec un svg comme glyphe serait assez sympa. Partant de mes utilisations des SVG avec FMX et avant d'en faire un composant, j'ai fait plusieurs essais


de gauche à droite, un simple TSkSVG que du code va "trafiquer", un TSKSVG chargé à partir d'une ressource, un Panel (seul conteneur connu en VCL) avec un skSVG et enfin un skAnimatedPaintbox (qui lui aussi est un conteneur)

Un impératif : pouvoir changer la couleur de fond quand la souris passe dessus comme pour un bouton "classique" et bien sûr prendre en compte l'apparence en cours.

Le premier implique un "bidouillage" sur le source du SVG, l'ajout d'un rectangle, et une modification au runtime donc pas forcément interessant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
procedure TFormTest.SkSvg4MouseEnter(Sender: TObject);
var c : String;
begin
SkSVG4.Svg.Source:=ReplaceText(SkSVG4.Svg.Source,'rect  style="fill-opacity:0','rect  style="fill-opacity:1');
end;
procedure TFormTest.SkSvg4MouseLeave(Sender: TObject);
begin
SkSVG4.Svg.Source:=ReplaceText(SkSVG4.Svg.Source,'rect  style="fill-opacity:1','rect  style="fill-opacity:0');
end;

Pour le second, c'est pratiquement la même chose, impliquant deux SVG différents la même manipulation au runtime pouvant s'appliquer (non fait).

Pour le panel, la solution la plus simple sauf en ce qui concerne "l'effet"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
procedure TFormTest.Panel1MouseEnter(Sender: TObject);
begin
Panel1.Color:=StyleServices.GetStyleColor(scButtonFocused); // ou TStyleManager.ActiveStyle.GetSystemColor(scButtonFocused) ?
Panel1.StyleElements:=Panel1.StyleElements-[seClient];
end;
 
procedure TFormTest.Panel1MouseLeave(Sender: TObject);
begin
panel1.StyleElements:=Panel1.StyleElements+[seClient];
end;

inconvénient "l'effet" a tendance à ne faire qu'un petit clignotement, voire ne pas s'appliquer

Dernière solution avec Skia

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
procedure TFormTest.SkAnimatedPaintBox1AnimationDraw(ASender: TObject;
  const ACanvas: ISkCanvas; const ADest: TRectF; const AProgress: Double;
  const AOpacity: Single);
var btnColor, bordcolor : TColor;
begin
  var LPaint: ISkPaint := TSkPaint.Create;
  if SkAnimatedPaintBox1.Animation.Enabled
   then begin
        if not Sametext(TStyleManager.ActiveStyle.Name,'windows')
         then btncolor:=StyleServices.GetStyleColor(scButtonHot)
         else btncolor:=clHighlight; // GetSystemColor ?
        var Alpha : byte := Round(255*0.6);  // 255*opacity
        Shape1.Brush.Color:=btncolor;
        Lpaint.SetARGB(alpha,GetrValue(btncolor),GetGValue(btncolor),GetBValue(btncolor));
        Lpaint.Style:=TSkPaintStyle.Fill;
        Acanvas.DrawRoundRect(TRectF.Create(0,0,SkAnimatedPaintBox1.Width,SkAnimatedPaintBox1.Height),10,10,lpaint);
   end
   else begin
       if not Sametext(TStyleManager.ActiveStyle.Name,'windows')
         then bordcolor:=StyleServices.GetStyleColor(scBorder)
         else bordcolor:=clBtnShadow; // GetSystemcolor ?
     Shape1.Brush.Color:=bordcolor;
     lPaint.Style:=TSkPaintStyle.Stroke;
     lPaint.StrokeWidth:=2;
     lPaint.SetARGB(255,GetrValue(bordcolor),GetGValue(bordcolor),GetBValue(bordcolor));
     Acanvas.DrawRoundRect(TRectF.Create(0,0,SkAnimatedPaintBox1.Width,SkAnimatedPaintBox1.Height),10,10,lPaint);
   end;
end;
 
procedure TFormTest.SkAnimatedPaintBox1MouseEnter(Sender: TObject);
begin
 SkAnimatedPaintBox1.Animation.Enabled:=true;
end;
 
procedure TFormTest.SkAnimatedPaintBox1MouseLeave(Sender: TObject);
begin
 SkAnimatedPaintBox1.Animation.Enabled:=False;
end;

Il me reste un seul problème quand le style sélectionné est le style "Windows" je n'arrive pas à obtenir la "bonne" couleur

ici la vidéo
https://serge-girard.developpez.com/...outonsSVG.webm

Donc questions :
Qu'est-ce qui cloche avec mon panel ?
Comment obtient-on la couleur quand le style est celui par défaut (Windows) ? (j'ai essayé GetSystemColor sans plus de résultat)