Utiliser correctement les transformations

Question

Dans le code suivant, j'essaie de faire un hexagone en utilisant des points que j'ai calculés à la main pour l'unité hexadécimale, puis je voudrais l'agrandir. Cependant, cela ne fonctionne pas. Au lieu d'un hex blanc avec une bordure verte, je reçois un hexagone vert solide. Est-ce que je me méprends sur l'effet de l'échelle de transformation? Il semble commencer par l'hex de l'unité et peindre tout le chemin jusqu'à l'hexagone redimensionné, donc la couleur. Ou est-ce encore un malentendu?

Comment obtenir une forme évolutive avec largeur de bordure X et remplissage de couleur souhaité?

Polygon { 
    points: [1, 0, 0.5, -0.866, -0.5, -0.866, -1, 0, -0.5, 0.866, 0.5, 0.866] 
    fill: Color.WHITE 
    translateX: 100 
    translateY: 100 
    strokeWidth: 2 
    transforms: Scale {x: 20, y: 20} 
    stroke: Color.GREEN 
    opacity: 0.3 
} 

Answer 1

Le problème semble être vous réglez la strokeWidth à 2.

Le strokeWidth est appliqué avant la transformation de mise à l'échelle, de sorte que vous avez un hexagone de l'unité avec un strokeWidth de 2, ce qui obscurcit complètement le hex blanc au centre. Cet hex obscurci (et apparemment vert) est ensuite redimensionné 20 fois ... produisant un plus grand hexagone vert.

Définissez la, inférieure strokeWidth comme ceci:

Polygon { 
      points: [1, 0, 0.5, - 0.866, - 0.5, - 0.866, - 1, 0, - 0.5, 0.866, 0.5, 0.866] 
      fill: Color.WHITE 
      translateX: 100 
      translateY: 100 
      strokeWidth: 0.5 
      transforms: Scale {x: 20, y: 20} 
      stroke: Color.GREEN 
      opacity: 0.3 
     } 

et vous devriez voir l'hexagone blanc avec une bordure verte. Continuez à réduire la largeur de course jusqu'à obtenir les résultats souhaités.