Discussion :

[mistercactus]

Salut les devs !

Je développe actuellement une application Android, et j'ai quelques soucis de rendu. Une image vaut mille mots :


Autant dire que mes yeux saignent .

Voici la structure de mon style :


Et les paramètres du TRectangle permettant de faire la bordure :


Quelqu'un aurait une idée pour rendre ça propre ?

[pprem]

aïe, oui, effectivement c'est moche

Je n'ai rien pour essayer de mon côté ce soir, mais peux-tu nous dire si ça fait pareil sous Windows ?

[SergioMaster]

Bonjour,

ma première réaction a été : mais pourquoi diable créer un style pour un bouton , pour les angles arrondis ? Il y a le TCornerButton
reste donc juste l'épaisseur du trait (ce qui me choque le plus) ou la couleur (encore que l'on puisse utiliser les styles fournis)

Donc, pour l'essentiel je ne vois pas le pourquoi d'un style particulier, pour le détail au lieu d'utiliser un fond uni (comme le style d'un bouton) utiliser un gradient pour atténuer ce noir devrait faire pas mal de bien (aussi bien pour le fond que pour le contour)
ici le design du style

à l'exécution (il est toujours possible de modifier les angles, la couleur et taille de fonte


à noter que pour le contour, j'ai modifié l'angle de mon gradient ce qui renforce l'impression de l'angle en bas à gauche

[mistercactus]

Bien le bonjour Messieurs ! Merci d'accorder du temps à ma demande .

Pour ma part, je ne suis pas designer, je m'occupe seulement de la partie développement. Actuellement, ce design est provisoire, et pourra être changé par la suite (merci pour les exemples )

Je n'ai rien pour essayer de mon côté ce soir, mais peux-tu nous dire si ça fait pareil sous Windows ?

Non, les styles apparaissent correctement sous Windows.

J'ai peut-être été imprécis dans ma question, je vais donc arranger cela : mon objectif est que ce style (qui est un bouton) rende bien. En image :

Windows :


Android :


J'aimerais simplement avoir le rendu Windows sur Android !

Ceci dit, le petit trou suivant :


Parfois il apparaît, parfois pas (je n'ai pas encore trouvé le pourquoi du comment).

Ce que je n'arrive pas à faire pour l'instant, c'est "lisser" le trait, pour qu'il n'apparaisse pas tout pixellisé.


En réalité ceci se produit pour les styles que j'ai créé contenant une bordure de TRectangle :

Un TEdit :


Un TCheckBox :


Encore une fois, ces problèmes n'apparaissent pas sous Windows.

Peut-être que je m'y prends de la mauvaise manière avec mes styles .

[SergioMaster]

Avec un RoundRect pas de "gap" sur mon Android

RoundRect parce que je me suis trompé en cours de design

Pour ma part, je ne suis pas designer, je m'occupe seulement de la partie développement.
Peut-être que je m'y prends de la mauvaise manière avec mes styles .

De mon point de vue oui. Moi non plus je ne suis pas designer mais cette phrase

Actuellement, ce design est provisoire, et pourra être changé par la suite

résume pour moi la situation.

Si vous créez vos propres styles un designer devra aller dans votre programme pour modifier chacun de ceux que vous avez créé.
Si vous utilisez un style "standard" au pire il aura à modifier une seule et unique image : cette fameuse image ressource que l'on trouve quand l'on fouille (propriété SourceLookup des TStyleObjects) il y a un papier de Sarina Dupont sur le sujet.

Cela dit rien n'empêche de fournir plusieurs fichiers styles (ou plusieurs stylebooks) impliquant alors les mêmes manipulations

[SergioMaster]

Enfin, pour le problème du gap cela ne vient pas du style
J'ai écrit un petit programme avec en tout et pour tout un rectangle (avec un contour à 5 blanc) et deux boutons pour agrandir/diminuer les angles

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
39
40
41
42
43
44
45
46
47
48
49
50
 
unit Unit37;
 
interface
 
uses
  System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
  FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs,
  FMX.Controls.Presentation, FMX.StdCtrls, FMX.Objects, System.Math;
 
type
  TForm37 = class(TForm)
    Rectangle1: TRectangle;
    Button1: TButton;
    Button2: TButton;
    procedure Button1Click(Sender: TObject);
    procedure Button2Click(Sender: TObject);
  private
    { Déclarations privées }
  public
    { Déclarations publiques }
  end;
 
var
  Form37: TForm37;
 
implementation
 
{$R *.fmx}
{$R *.LgXhdpiPh.fmx ANDROID}
 
procedure TForm37.Button1Click(Sender: TObject);
var r : Single;
begin
r:=Rectangle1.XRadius+1;
r:=Min(R,Rectangle1.Height/2);
Rectangle1.XRadius:=R;
Rectangle1.YRadius:=R;
end;
 
procedure TForm37.Button2Click(Sender: TObject);
var r : Single;
begin
r:=Rectangle1.XRadius-1;
if r<0 then r:=0;
Rectangle1.XRadius:=R;
Rectangle1.YRadius:=R;
end;
 
end.

conclusion : le gap apparait/disparait en fonction de la valeur

à signaler à embarcadero ?

[mistercactus]

conclusion : le gap apparait/disparait en fonction de la valeur

Déjà une chose comprise

à signaler à embarcadero ?

ça ne me paraît pas être un comportement normal, donc je dirais oui

Avec le RoundRect mon problème principal reste présent :


On voit clairement que la bordure est crénelée. Concrètement, j'aimerais ajouter de l'anti-aliasing pour "lisser" le tout !

Si vous créez vos propres styles un designer devra aller dans votre programme pour modifier chacun de ceux que vous avez créé.

En fait, mon collègue (meilleur que moi en design) me fait des maquettes, et je crée les styles correspondants dans Delphi. D'où le fait que ce soit moi qui fasse les styles, et qu'ils ne soient pour l'instant pas très jolis, car je n'ai pas encore reçu les maquettes (d'où le design provisoire) !

[pprem]

à signaler à embarcadero ?

Clairement oui, avec ton programme zippé en pièce jointe pour reproduire le problème.

[pprem]

En fait, mon collègue (meilleur que moi en design) me fait des maquettes, et je crée les styles correspondants dans Delphi. D'où le fait que ce soit moi qui fasse les styles, et qu'ils ne soient pour l'instant pas très jolis, car je n'ai pas encore reçu les maquettes (d'où le design provisoire) !

Dans ce cas ne t'embêtes pas, file lui de programme du Bitmap Style Designer et/ou les images de base à personnaliser pour qu'il fasse le boulot à ta place.

Le travail de graphiste aux graphistes, tel est mon crédo (tant que ça ne concerne pas le fait de mettre un toucan sur une photo de ville )

[mistercactus]

Dans ce cas ne t'embêtes pas, file lui de programme du Bitmap Style Designer et/ou les images de base à personnaliser pour qu'il fasse le boulot à ta place.

Je vais voir un peu comment ça fonctionne, et mettre ça en place .

Ceci dit, par curiosité, auriez-vous une idée pour ajouter de l'anticrénelage sur cette bordure ?

[pprem]

Ceci dit, par curiosité, auriez-vous une idée pour ajouter de l'anticrénelage sur cette bordure ?

ça devrait être déjà actif, c'est pour ça que je soupçonne un bogue

[mistercactus]

Je vais prendre mon mal en patience alors

L'un de vous a déjà reporté les bugs, ou je m'en occupe ?

[SergioMaster]

Bonjour

L'un de vous a déjà reporté les bugs, ou je m'en occupe ?

à toi " l'honneur " je n'ai pas le temps (ou le courage) de le faire. À vérifier si ce n'est pas un bogue connu, il n'y a rien de plus rageant que de se faire renvoyer aux calendes grecques avec un "duplicate case"

[mistercactus]

ça marche, je vais aller me jeter aux fauves

Plus sérieusement, ça me permettra de voir comment ça fonctionne, vu que je ne l'ai encore jamais fait.

En attendant, problème résolu (en quelque sorte) ! Merci encore

[SergioMaster]

Bonjour,

comme je lâche pas facilement mon os j'ai fait plusieurs autres essais

- Tout d'abord j'ai fait quelques recherches et trouvé ceci
- Suite à la lecture de ce lien j'ai changé la propriété Quality de la forme (je ne connaissais même pas son existence ) constatation cela change un peu (en mieux) la donne mais, encore une fois quelques gaps apparaissent, dans mes tests un seul lorsque la valeur XRadius=YRadius=2)
- Suite à cette constatation j'ai rajouté un trackbar pour modifier aussi l'épaisseur de bordure ce qui fourni quelques surprises (gap) supplémentaires

AMHA il y a une histoire d'arrondi quelque part dans le calcul dessin mais je n'irais pas fouiller dans les sources une fois la moelle sucée l'os est moins attirant

reste que pour moi la démarche serait que le graphiste modifie le style ainsi que l'a indiqué Patrick et que au niveau du dev tu te contentes d'un fichier style déterminé, de plus cela permettra des choses assez difficiles à mettre en place dans un style personnalisé (les effets par exemple)

[SergioMaster]

Bonjour,

je reviens sur le sujet avec d'autres idées. Ayant découvert récemment TPath et consort (TPathLabel) mais aussi les composants RadiantShapes voici un autre style qui pourrait bien s'avérer intéressant



Ici j'ai mis un composant RadientCapsule mais un TPath, si j'avais pu en trouver un identique aurait peut-être fait la même chose.
Mon idée était que, du fait qu'il s'agit de pathdata, cela forcerait le calcul du dessin (au détriment du temps CPU mais rien n'est parfait.

et voilà un premier jus

qui semble confirmer mon idée, un essai sur fond noir et bouton blanc me confirme mon impression (changements de taille ou échelle inclus)

reste un dernier essai : le changement de taille du contour

pour les sources voir ici