Jump to content

Component: Complex Shape ( Web Primitives): Difference between revisions

From Flowcode Help
← Older edit

SteveT (talk | contribs)

4 user groups
6,424 edits
m Text replacement - "style="background-color:#EAE1EA;"" to "class="mtx-class-propfolder""
 
(10 intermediate revisions by 3 users not shown)
Line 5: Line 5:
|-
|-
| width="20%" style="color:gray;" | Version
| width="20%" style="color:gray;" | Version
| 0.1
| 1.1
|-
|-
| width="20%" style="color:gray;" | Category
| width="20%" style="color:gray;" | Category
Line 15: Line 15:
Creates a Javascript compatible complex shape object.
Creates a Javascript compatible complex shape object.


==Component Source Code==
==Version information==
 
Please click here to download the component source project: [https://www.flowcode.co.uk/wiki/componentsource/FC_Comp_Source_WEBEXP_ComplexShape.fcsx FC_Comp_Source_WEBEXP_ComplexShape.fcsx]


Please click here to view the component source code (Beta): [https://www.flowcode.co.uk/FlowchartView/?wfile=componentsource/FC_Comp_Source_WEBEXP_ComplexShape.fcsx FC_Comp_Source_WEBEXP_ComplexShape.fcsx]
Library Version, Component Version, Date, Author, Info
3, 1.1, 14-06-24, ST, Fixed generation of shape data


==Detailed description==
==Detailed description==
Line 34: Line 33:


==Examples==
==Examples==
For example to create any of the following images:
[[File:ComplexShape images.png|ComplexShape example images]]


''<span style="color:red;">No additional examples</span>''
The following commands are used:


Rocket:
SS,0,-100
AL,30,-70
AL,30,100
AL,-30,100
AL,-30,-70
AL,0,-100
SP
SS,30,20
AL,70,100
AL,30,100
AL,30,20
SP
SS,-30,20
AL,-30,100
AL,-70,100
AL,-30,20
SP
SS,0,20
AL,10,100
AL,-10,100
AL,0,20
SP
SS,-20,-50
AA,20,-50,10,10
AA,-20,-50,10,10


Zigzag:
SS,0,-100
AP,10,-90,-20,-80,30,-70,-40,-60,50,-50,-60,-40,70,-30,-80,-20,90,-10,-100,0
AP,90,10,-80,20,70,30,-60,40,50,50,-40,60,30,70,-20,80,10,90,0,100
Heart:
SS,0,-70
AB,10,-80,30,-100,50,-100
AA,100,-50,50,50
AB,100,0,50,50,0,100
AB,-50,50,-100,0,-100,-50
AA,-50,-100,50,50
AB,-30,-100,-10,-80,0,-70
Grapes:
SS,18,-30
AA,58,-30,10,10
AA,18,-30,10,10
SP
SS,18,10
AA,58,10,10,10
AA,18,10,10,10
SP
SS,18,50
AA,58,50,10,10
AA,18,50,10,10
SP
SS,56,-10
AA,96,-10,10,10
AA,56,-10,10,10
SP
SS,56,30
AA,96,30,10,10
AA,56,30,10,10
SP
SS,-20,-50
AA,20,-50,10,10
AA,-20,-50,10,10
SP
SS,-20,-10
AA,20,-10,10,10
AA,-20,-10,10,10
SP
SS,-20,30
AA,20,30,10,10
AA,-20,30,10,10
SP
SS,-20,70
AA,20,70,10,10
AA,-20,70,10,10
SP
SS,-58,-30
AA,-18,-30,10,10
AA,-58,-30,10,10
SP
SS,-58,10
AA,-18,10,10,10
AA,-58,10,10,10
SP
SS,-58,50
AA,-18,50,10,10
AA,-58,50,10,10
SP
SS,-96,-10
AA,-56,-10,10,10
AA,-96,-10,10,10
SP
SS,-96,30
AA,-56,30,10,10
AA,-96,30,10,10


==Macro reference==
==Macro reference==
Line 43: Line 143:
==Property reference==
==Property reference==


{| class="wikitable" style="width:60%; background-color:#FFFFFF;"
{| class="mtx-class-macrotable wikitable"
|-
|-
| width="10%" align="center" style="background-color:#D8C9D8;" | [[File:Fc9-prop-icon.png]]
| width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-prop-icon.png]]
| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''Properties'''  
| width="90%" class="mtx-class-macrohead" | '''Properties'''  
|-
|-
|-
|-
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
| width="10%" align="center" class="mtx-class-propfolder" | [[File:Fc9-conn-icon.png]]
| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Misc
| width="90%" class="mtx-class-propfolder" | Misc
|-
|-
|-
|-
Line 58: Line 158:
| colspan="2" | Code for drawing the primitive&nbsp;
| colspan="2" | Code for drawing the primitive&nbsp;
|-
|-
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
| width="10%" align="center" class="mtx-class-propfolder" | [[File:Fc9-conn-icon.png]]
| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Fill
| width="90%" class="mtx-class-propfolder" | Fill
|-
|-
|-
|-
Line 77: Line 177:
| colspan="2" | &nbsp;
| colspan="2" | &nbsp;
|-
|-
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
| width="10%" align="center" class="mtx-class-propfolder" | [[File:Fc9-conn-icon.png]]
| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Outline
| width="90%" class="mtx-class-propfolder" | Outline
|-
|-
|-
|-
Line 96: Line 196:
| colspan="2" | The outline colour of the shape&nbsp;
| colspan="2" | The outline colour of the shape&nbsp;
|-
|-
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
| width="10%" align="center" class="mtx-class-propfolder" | [[File:Fc9-conn-icon.png]]
| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Advanced
| width="90%" class="mtx-class-propfolder" | Advanced
|-
|-
|-
|-
Line 105: Line 205:
| colspan="2" | &nbsp;
| colspan="2" | &nbsp;
|}
|}
==Component Source Code==
Please click here to download the component source project: [https://www.flowcode.co.uk/wiki/componentsource/FC_Comp_Source_WEBEXP_ComplexShape.fcsx FC_Comp_Source_WEBEXP_ComplexShape.fcsx]
Please click here to view the component source code (Beta): [https://www.flowcode.co.uk/FlowchartView/?wfile=componentsource/FC_Comp_Source_WEBEXP_ComplexShape.fcsx FC_Comp_Source_WEBEXP_ComplexShape.fcsx]

Latest revision as of 14:37, 13 July 2026

Author MatrixTSL
Version 1.1
Category Web Primitives


Complex Shape component

Creates a Javascript compatible complex shape object.

Version information

Library Version, Component Version, Date, Author, Info
3, 1.1, 14-06-24, ST, Fixed generation of shape data

Detailed description

Each line could be one of 7 commands with the following parameters: 

 AP: AddPointsLine,  x0, y0, x1, y1, ...
 AC: AddPointsCurve, x0, y0, x1, y1, ...
 AL: AddLine,        x0, y0
 AB: AddBezier,      x0, y0, x1, y1, x2, y2
 AA: AddArc,         x0, y0, dx, dy
 SS: SetStart,       x0, y0
 SP: StartPart

Examples

For example to create any of the following images:

ComplexShape example images


The following commands are used: 

Rocket:
SS,0,-100
AL,30,-70
AL,30,100
AL,-30,100
AL,-30,-70
AL,0,-100
SP
SS,30,20
AL,70,100
AL,30,100
AL,30,20
SP
SS,-30,20
AL,-30,100
AL,-70,100
AL,-30,20
SP
SS,0,20
AL,10,100
AL,-10,100
AL,0,20
SP
SS,-20,-50
AA,20,-50,10,10
AA,-20,-50,10,10

Zigzag:
SS,0,-100
AP,10,-90,-20,-80,30,-70,-40,-60,50,-50,-60,-40,70,-30,-80,-20,90,-10,-100,0
AP,90,10,-80,20,70,30,-60,40,50,50,-40,60,30,70,-20,80,10,90,0,100

Heart:
SS,0,-70
AB,10,-80,30,-100,50,-100
AA,100,-50,50,50
AB,100,0,50,50,0,100
AB,-50,50,-100,0,-100,-50
AA,-50,-100,50,50
AB,-30,-100,-10,-80,0,-70

Grapes:
SS,18,-30
AA,58,-30,10,10
AA,18,-30,10,10
SP
SS,18,10
AA,58,10,10,10
AA,18,10,10,10
SP
SS,18,50
AA,58,50,10,10
AA,18,50,10,10
SP
SS,56,-10
AA,96,-10,10,10
AA,56,-10,10,10
SP
SS,56,30
AA,96,30,10,10
AA,56,30,10,10
SP
SS,-20,-50
AA,20,-50,10,10
AA,-20,-50,10,10
SP
SS,-20,-10
AA,20,-10,10,10
AA,-20,-10,10,10
SP
SS,-20,30
AA,20,30,10,10
AA,-20,30,10,10
SP
SS,-20,70
AA,20,70,10,10
AA,-20,70,10,10
SP
SS,-58,-30
AA,-18,-30,10,10
AA,-58,-30,10,10
SP
SS,-58,10
AA,-18,10,10,10
AA,-58,10,10,10
SP
SS,-58,50
AA,-18,50,10,10
AA,-58,50,10,10
SP
SS,-96,-10
AA,-56,-10,10,10
AA,-96,-10,10,10
SP
SS,-96,30
AA,-56,30,10,10
AA,-96,30,10,10

Macro reference

Property reference

Properties
Misc
Code
Code for drawing the primitive 
Fill
Colour
Specifies the fill colour of the shape 
Gradient
 
Gradient Style
 
Outline
Style
Outline line style 
Outline size
The outline size in pixels 
Colour
The outline colour of the shape 
Advanced
Custom Attributes
 

Component Source Code

Please click here to download the component source project: FC_Comp_Source_WEBEXP_ComplexShape.fcsx

Please click here to view the component source code (Beta): FC_Comp_Source_WEBEXP_ComplexShape.fcsx

Retrieved from "https://www.flowcode.co.uk/wiki/index.php?title=Component:_Complex_Shape_(_Web_Primitives)&oldid=48144"