[STUDIO] Création de formes

[chloeguillem]

Bonjour,
Je voulais savoir s'il était possible de créer des formes sur Synapps. Ma problématique est que j'ai le plan d'un bâtiment et que j'aimerais directement rajouter sur Synapps une forme en couleur (autre que rectangulaire) pour délimiter une zone de ce bâtiment.
J'aimerais savoir si c'est possible et si oui comment le faire ?

Merci d'avance

[manufitoussiwit]

Bonjour, il n'est pas possible de dessiner directement des formes avec Synapps Studio.
Mais il y a deux astuces :

Dessiner un cercle

En jouant avec la taille d'un empilement et la courbure de ses coins :

L'exemple d'acteur à copier-coller dans une scène :

SYNAPPS-STUDIO-ACTOR|{"type":"layout/stack","key":"unStackRond","properties":{"height":"40px","width":"40px","backgroundColor":"rgba(60, 225, 170, 1)","borderRadius":"20px","horizontalAlignment":"middle","verticalAlignment":"middle"}}

La courbure ici fait la moitié de sa taille.

Utiliser des formes SVG.

Il faut faire le dessin, la forme en SVG avec un éditeur dédié.

Ensuite, il y a deux manières d'intégrer des dessins SVG :

• comme une image classique, dans un acteur image.

• dans un acteur html en tant que balise <svg> :

L'exemple d'acteur à copier-coller dans une scène :

SYNAPPS-STUDIO-ACTOR|{"type":"display/html","key":"html1","properties":{"content":"<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"105\" height=\"105\" viewBox=\"0 0 105 105\" xml:space=\"preserve\">\n<defs>\n</defs>\n<g transform=\"matrix(0.95 0 0 0.95 50.64 55.78)\" id=\"Tx6NaAEAJZRWVGuQDIbcW\">\n<path style=\"stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(179,181,179); fill-rule: nonzero; opacity: 1;\" vector-effect=\"non-scaling-stroke\" transform=\" translate(-40, -40)\" d=\"M 0 30.56 L 40 0 L 80 30.56 L 64.72 80 L 15.28 80 L 0 30.56 z\" stroke-linecap=\"round\"/>\n</g>\n<g transform=\"matrix(0.61 0 0 0.61 75.38 28.35)\" id=\"uenNpQLNLWqB08ItUryG1\">\n<path style=\"stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(43,158,43); fill-rule: nonzero; opacity: 1;\" vector-effect=\"non-scaling-stroke\" transform=\" translate(-40, -40)\" d=\"M 80 52.5 L 52.5 52.5 L 52.5 80 L 27.5 80 L 27.5 52.5 L 0 52.5 L 0 27.5 L 27.5 27.5 L 27.5 0 L 52.5 0 L 52.5 27.5 L 80 27.5 L 80 52.5 z\" stroke-linecap=\"round\"/>\n</g>\n</svg>","horizontalAlignment":"middle","verticalAlignment":"middle"}}

Avantage ici, on peut ajouter des jokers dans le contenu de l'acteur html pour commander des choses dans le svg, avec Studio :

L'exemple d'acteur à copier-coller dans une scène :

SYNAPPS-STUDIO-ACTOR|{"type":"display/html","key":"html1","properties":{"content":"<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"105\" height=\"105\" viewBox=\"0 0 105 105\" xml:space=\"preserve\">\n<defs>\n</defs>\n<g transform=\"matrix(0.95 0 0 0.95 50.64 55.78)\" id=\"Tx6NaAEAJZRWVGuQDIbcW\">\n<path style=\"stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(179,181,179); fill-rule: nonzero; opacity: 1;\" vector-effect=\"non-scaling-stroke\" transform=\" translate(-40, -40)\" d=\"M 0 30.56 L 40 0 L 80 30.56 L 64.72 80 L 15.28 80 L 0 30.56 z\" stroke-linecap=\"round\"/>\n</g>\n<g transform=\"matrix(0.61 0 0 0.61 75.38 28.35)\" id=\"uenNpQLNLWqB08ItUryG1\">\n<path style=\"stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: {{plusColor}}; fill-rule: nonzero; opacity: 1;\" vector-effect=\"non-scaling-stroke\" transform=\" translate(-40, -40)\" d=\"M 80 52.5 L 52.5 52.5 L 52.5 80 L 27.5 80 L 27.5 52.5 L 0 52.5 L 0 27.5 L 27.5 27.5 L 27.5 0 L 52.5 0 L 52.5 27.5 L 80 27.5 L 80 52.5 z\" stroke-linecap=\"round\"/>\n</g>\n</svg>","horizontalAlignment":"middle","verticalAlignment":"middle"},"additionalDefs":{"plusColor":{"type":"color"}},"additionals":{"plusColor":"rgba(214, 61, 61, 1)"}}

Je vais ajouter tout ça dans la documentation

[chloeguillem]

Merci beaucoup pour l'aide, je vais regarder ça