Discussion :

[SergioMaster]

Bonjour,

Oui, le titre fait sourire , accrocheur il me permet ainsi de divulguer une information sur le futur webinaire de mar. 28 janv. 2020 14:00 - 15:30

Avant que Patrick (pprem) nous fasse sa présentation sur les SVG, j'ai refait mon bilan d'avancement de mes divers essais de chargement de fichiers SVG directement par programme.


Le programme n'est certes pas abouti, il y a encore des points non réglés : la gestion des groupes #g incluant les images prédéfinies #define(encore que cela avance), la gestion des clipaths (je n'ai aucune idée de la manière de procéder mais cela fera un autre sujet) et enfin d'où le titre, les étoiles.
PS. Toute suggestion sur la partie clippath sera bienvenue même si je procrastine sur ce point de même que le rendu sous les autres OS que Windows

Malheureusement, les outils que Patrick va présenter ne sont pas plus avancés que moi sur le sujet (je précise bien s'il s'agit de FMX). Il est vrai que piocher mes exemples dans les drapeaux (fournis par wikipédia) ouvre à beaucoup plus de cas que les exemples fournis par les solutions proposées par RiverSoft, Winsoft et TMS Software.

En image, mon problème

une lumière peut-être dans ce tunnel, quoique en fait au niveau du programme il s'agisse d'un bogue qui pourrait peut-être me mettre sur un contournement intéressant

ci-dessus l'utilisation de TMSFNCImage

toujours les mêmes problèmes (comme dans la série starwars il va y avoir plein d'épisodes )

Alors, oui, il s'agit d'un problème lié au fill-mode et cette question est bien sûr en rapport avec ce sujet mais il s'avère que c'était une fausse piste.

Un futur post vous en dira un peu plus (path à tester, différences entre les étoiles ... ) si vous êtes intéressés.

[ALWEBER]

Je pense que l'étoile est construite à partir de cinq segment et elle devrait l'être à partir de 10 segments

[SergioMaster]

Tout à fait mais il s'agit de la norme w3c pour les fichiers SVG donc ce n'est pas aux données de se plier au 10 segments mais bien au "logiciel" de faire en sorte que cela soit bien interprété

Code xml :

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

1
2
3
4
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="260" height="245">
<path d="m55,237 74-228 74,228L9,96h240"/>
</svg>

Ce fichier ouvert dans un explorateur internet propose une étoile pleine
le composant TPath , une étoile avec un centre non coloré.

Pour info le drapeau du Maroc

Code XML :

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

1
2
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="900" height="600"><rect width="900" height="600" fill="#c1272d"/>
<path d="m449.99991,224.31497-44.4674,136.87006 116.40181-84.55895H378.06451l116.4028,84.55895z" fill="none" stroke="#006233" stroke-width="14.62993431"/></svg>

le "remplisage" de l'étoile est "none" (transparent) ce qui "fait" la couleur c'est le traitement des bordures (stroke=couleur et stoke-with= largeur)
mon bogue (et celui de TMS) c'est dans l'interprétation de la largeur

AMHA c'est un bogue d'interprétation du composant, le path.data étant transformé en "M55,237 L129,9 L203,237 L9,96 L249,96"
le tout ne poserait pas de problème si le fillmode était considéré comme non-zero (fill-rule=non-zero) mais ce n'est pas une option de TPath

[anapurna]

Salut

Tiens moi j'aurais dis que c'est Explorer qui lit mal les infos.
Plus sérieusement, comme le dit ALWEBER il y a une différence entre utilisation de 5 segments et celle de 10.

Après il faut peut-être voir du côté des "Opérations booléennes" ou "opérations ensemblistes".
Dans ton cas, on est enclin à penser que le Tpath par defaut utilise la différence (ou soustraction) alors que dans ce cas-là, ce serait plus l'union ou l'addition.

Mes 2 cents.

PS : je viens de voir deux liens intéressants qui pourraient effectivement dire d'où vient le problème. Ce n'est pas forcement Delphi qui n'est pas cohérent.
En regardant du côté de la techno Microsoft, le fameux framework .net.

Voici deux liens très intéressants :

• CombinedGeometry
• FillRules

[Roland Chastain]

Ce fichier ouvert dans un explorateur internet propose une étoile pleine
le composant TPath , une étoile avec un centre non coloré.

Sans me prononcer sur le fond de la question (que je ne connais pas), voici le résultat avec BGRABitmap, et le code suivant :

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
var
  bmp: TBGRABitmap;
  svg: TBGRASVG;
begin
  bmp := TBGRABitmap.Create;
  try
    svg := TBGRASVG.Create(edSvg.Text);
    try
      bmp.SetSize(Round(svg.Width.Value), Round(svg.Height.Value));
      bmp.Fill(BGRAWhite);
      svg.Draw(bmp.Canvas2D, 0, 0, cuPixel);
      bmp.Draw(Canvas, 5, 5);
    finally
      svg.Free;
    end;
  finally
    bmp.Free;
  end;
end;

Je n'ai pas cherché à quoi sert l'option cuPixel, ni quelles sont les autres options disponibles.

Ci-joint le projet Lazarus.

[SergioMaster]

Bonjour Roland

FMX est un peu (beaucoup) spécial je suis bien conscient qu'utiliser des techniques "autres" assure le dessin, tu en fais la preuve.
Tout comme la solution proposée par RiverSoft en VCL mais en FMX il y a des limitations

Gradient Fills are limited on Mobile (limitation of FMX)
No Clipping support in FMX

ici, une démo flagrante en ce qui concerne les étoiles

et ici le clipping

vous remarquerez qu'en VCL les petites croix du drapeau de la Géorgie ont un problème (crénelage) en FMX elles sont trop grosses et le découpage n'est pas bon mais on était prévénu que cela ne fonctionnerait pas
pour en finir avec les bogues constatés (et même si on est proche du Brexit )

ici le programme FMX fourni une meilleure version de l'image quoique pas exacte.

Il n'empêche que pour moi, cette solution reste la plus aboutie.


Ce qui répond en partie aux assertions d'Alweber et Anapurna sur le nombre de segments
Le remplissage n'est pas traité de la même manière en VCL (fill-rule:nonzero) qu'en FMX (fill-rule:evenodd). Or par défaut dans la norme c'est nonzero qui est appliqué.

pour info le drapeau de l'Europe s'affiche correctement même en FMX, toutefois ce n'est pas en utilisant 10 segments mais grâce à quelques transformations d'un triangle

Code XML :

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

<defs><g id="s"><g id="c"><path id="t" d="M0,0v1h0.5z" transform="translate(0,-1)rotate(18)"/><use xlink:href="#t" transform="scale(-1,1)"/></g><g id="a"><use xlink:href="#c" transform="rotate(72)"/><use xlink:href="#c" transform="rotate(144)"/></g><use xlink:href="#a" transform="scale(-1,1)"/></g></defs>

Mes fouilles ne m'ont toujours pas permis de trouver la différence entre les deux remplissages de Canvas

Note : Oui, je sais, je vais les chercher loin mes exemples jusqu'en Eswatini (Swaziland) ou dans les pays se terminant en stan (Kazakhstan, Kirghizstan ...) la plupart fonctionnent facilement ceux que je pointe du doigt font partie des 20% de la loi des 20/80

[SergioMaster]

Malgré les corrections

TPathData, bezier commands (Q,q,T,t) bad transformation FireMonkey RSP-27211
TPathData bugs FireMonkey RSP-34413
TPathData, conversion errors FireMonkey RSP-27163
TPathData, arc command repetition FireMonkey RSP-27164
TPathData dosen't work with quadratic Bézier curve commands FireMonkey RSP-17890

la guerre des étoiles est toujours d'actualité

[Paul TOTH]

ah oui, TPath utilise un fill-rule evenodd

Code xml :

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

1
2
3
4
5
 
<svg height="400" width="400">
  <path d="m55,237 74-228 74,228L9,96h240" fill-rule="evenodd" />
  Sorry, your browser does not support inline SVG.
</svg>

https://oreillymedia.github.io/Using...fill-rule.html

[SergioMaster]

Oui, ça manque au TPath d'Embarcadero

[pprem]

Malgré les corrections
la guerre des étoiles est toujours d'actualité

ah, flute, j'pensais que tu serais pleinement content de cette version sur ce sujet, dommage, plus qu'à remettre le couvert sur JIRA pour la suivante

[SergioMaster]

Alors, je vais peut-être me lancer dans un ajout de procédure procedure FillEvenOdd(Path : TPath, Color : TAlphaColor);le principe est dans ce schéma

bien que je n'ai pour l'instant aucune idée du comment m'y prendre

[Paul TOTH]

et ce qui est un peu compliqué avec FMX c'est que tu dois gérer le problème sur plusieurs API GDIP, D2D, OpenGL, Metal

bon après il y a plusieurs façon d'aborder le problème

1.soit tu le fais dans l'API

pour D2D c'est facile, dans TCanvasD2D.CreatePathGeometry, il suffit d'ajouter Path.SetFillMode(D2D1_FILL_MODE_WINDING); après le Geometry.Open(Path); et le tour est joué...reste à voir comment gérer cela sur un CanvasGPU ^^

2.soit tu anticipes le problème - par exemple si tu fais le tour de l'étoile au lieu de croiser le lignes tu auras le résultat attendu (même si ça demande de calculer les 5 intersections), voir de dessiner ensuite les lignes si elles sont apparentes...l'avantage c'est que ça corrige le problème partout

EDIT: pour GDIP c'est possible aussi en changeant la première ligne de DoFillPath pour ajouter le FillMode P := TGPGraphicPath.Create(FillModeWinding);.

EDIT: en GPU ça utilise un Stencil buffer, la fonction inverse la valeur du buffer à chaque passage avant de remplir les pixels pour lesquels le Stencil buffer est > 0...Ce qui donne un trou en effet dans le cas de l'étoile puisque l'inversion à remis le buffer à 0...donc là faut faire une fonction de rendu qui tienne compte du sens horaire de chaque polygone pour savoir s'il doit remplir ou effacer le stencil buffer...pas aussi simple

[SergioMaster]

Je tente une première approche à base de scanline

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
procedure TForm1.Button1Click(Sender: TObject);
var
  Bitmap1, bitmap2: TBitmap;
  bd1,bd2 : TBitmapData;
  Color: TColor;
  Scanline, P2: PAlphaColorArray;
  x,y,i: Integer;
  colorfound : Boolean;
  colorstart,colorstop : integer;
  l,h : integer;
begin
  bitmap2:=path1.MakeScreenshot;
  l:=Bitmap2.width;
  h:=Bitmap2.height;
  Bitmap1:= TBitmap.Create(l,h);
  try
  Bitmap1.Map(TMapAccess.Write, bd1);
  Bitmap2.Map(TMapAccess.Read,bd2);
  for y:= 0 to h-1 do begin
       ScanLine:= PAlphaColorArray(bd1.GetScanline(y));
       P2:=PAlphaColorArray(bd2.GetScanline(y));
       colorfound:=false;
       colorstop:=-1;
       colorstart:=-1;
       for x:= 0 to l-1 do begin
           colorfound:=(p2[x]=Path1.Fill.Color);
           if colorfound then
            begin
             if (ColorStop>-1) then
              begin
                 for i := colorstop to x-1 do scanline[i]:=Talphacolors.red;
                 colorstop:=-1;
               end;
             Colorstart:=x;
             ScanLine[x]:= P2[x];
            end
           else if (colorstart>-1) AND (colorstop=-1) then colorstop:=x;
        end;
  end;
  Bitmap1.Unmap(bd1);
  Bitmap2.UnMap(bd2);
  finally
      image1.Bitmap:=bitmap1;
      Bitmap1.Free;
      bitmap2.Free;
    end;
end;

ce n'est pas encore très au point

[Paul TOTH]

outre le StencillBuffer, il est aussi possible de passer par la Tesselation, j'ai une très vieille démo qui utilise GLU pour cela...et qui dessine le résultat sur un Canvas...ce qui montre que le procédé est indépendant de l'API graphique