2. Create shapes

This section will presents everything to know about the shapes. The differents kind of shapes are:

• CadeShapeLeaf2D: Basic shapes with a simple form
• CadeShapeLabel: Basic text
• CadeShapeImage: Basic image display
• CadeShapeContainer: Addition of multiple shapes
• Advanced features: The differents features you can do on the shapes

All the advanced operation you can apply to a shape are present in the next setion --- ici la section des properties ---.

CadeShapeLeaf2D

The most simple shape. Use this to display a simple geometric form.

view := CadeView new open.

"A rectangle"
shape1 := CadeShapeLeaf2D shape: (0@0 extent: 50@100).
shape1 fillColor: (Color blue).
shape1 coordinates: 20@20.

"A circle"
shape2 := CadeShapeLeaf2D shape: (CadeCircle center: 0@0 radius: 30).
shape2 fillColor: (Color red).
shape2 coordinates: 300@100.

"A rectangle with soft angle"
shape3 := CadeShapeLeaf2D shape: (CadeRoundedRectangle origin: 0@0 size: 100@50 round: 20).
shape3 fillColor: (Color green darker).
shape3 coordinates: 50@150.

"A curve"
shape4 := CadeShapeLeaf2D shape: (CadeBezier start: 0@0 end: 0@50 controlPoint1: 25@25 controlPoint2: 50@50).
shape4 fillColor: (Color yellow).
shape4 coordinates: 300@200.

"A custom shape (a triangle)"
shape5 := CadeShapeLeaf2D shape: (CadePolyline vertices: {0@0. 0@100. 50@50}).
shape5 fillColor: (Color pink).
shape5 coordinates: 100@250.

view addShape: shape1.
view addShape: shape2.
view addShape: shape3.
view addShape: shape4.
view addShape: shape5.

In the screenshot bellow, we can observe the basic form we can display with Cade. We can display much complexe form using CadePolyline.

Cade can parse SVG like instruction to create complex shapes. The SvgParser class can generate a CadePolyline (a collection of point) and we can use this CadePolyline to draw a shape.

view := CadeView new open.

polyline := (SvgParser value new newGeometricShape: 
'm 0.0,0.0 c 37.3544,66.42267 74.7088,132.84534 112.0632,199.26801 -20.3195,5.6923 -41.57188,7.1971 -62.5882,7.5515 -29.16153,-56.66175 -58.32307,-113.32351 -87.4846,-169.98526 -6.71987,-2.10349 -7.20091,6.02049 -10.13274,10.12683 -27.42425,53.28614 -54.8485,106.57229 -82.27275,159.85843 -20.08604,0.068 -40.26682,-2.0506 -59.62855,-7.5426 36.91559,-66.42266 73.83118,-132.84531 110.74677,-199.26797 26.43229,-0.003 52.86458,-0.006 79.29687,-0.009 z m -40.3004,113.32407 c 21.97431,-1.22942 41.6945,20.57568 36.34345,42.37914 -4.54612,25.5151 -38.28583,36.913 -58.3458,21.5957 -18.42354,-11.865 -20.28418,-41.2231 -2.84596,-54.84304 6.74735,-6.08023 15.80297,-9.24296 24.84831,-9.1318 z').

shape := polyline asCadeShape.
shape coordinates: 240 @ 90.
shape fillColor: Color black.
view addShape: shape.

CadeShapeLabel

With Cade, you can also diplay text with the CadeShapeLabel. You can change the font of the text on multiple critera:

• The fontName to change the familly name of the font.
• The fontSize to change the point size of the font.
• The weight to change the thickness of the letters (regular or bold).
• The slant to change the angle of the letters (normal, italic, oblic).
• The underline to set an underline under the text.

You need to execute the following code in a Playground to import your OS currents fonts: FreeTypeFontProvider current updateFromSystem.

We will show the differents properties of a CadeShapeLabel from the folowing example:

view := CadeView new open.

default := CadeShapeLabel new.
default text: 'Hello World !'.
default fontName: 'Arial'.
default fillColor: Color black.

shape := default copy.

view addShape: default.
view addShape: shape.

default coordinates: 20@80.
shape coordinates: 120@80.

shape fontName: 'Comic Sans MS'

shape fontSize: 40

shape isBold: true

shape isItalic: true

shape isUnderline: true

It's also possible to change the horizontal or the vertical alignement of a shape. We will see the two methods to do it:

• alignX: for horizontal alignement. There are 3 options available, left, center and right.
• alignY: for verticalalignement. There are 4 options available, top, middle, baseline and bottom.

For the horizontal alignement (alignX:):

view := CadeView new open.

"The red dot represent the coordinates 0@0 of the CadeShapeLabel."
markerDefault := CadeShapeLeaf2D shape: (-2 @ -2 extent: 4 @ 4).
markerDefault fillColor: Color red.

shapeDefault := CadeShapeLabel new.
shapeDefault text: 'Hello World !'.
shapeDefault fontName: 'Arial'.
shapeDefault fillColor: Color black.

containerDefault := CadeShapeContainer new.
containerDefault addShape: markerDefault.
containerDefault addShape: shapeDefault.

container := containerDefault copy.

view addShape: containerDefault.
view addShape: container.

containerDefault coordinates: 60@80.
container coordinates: 220@80.

(container shapeList at: 2) alignX: 'left'.

container := container copy.
view addShape: container.
container coordinates: 220@110.
(container shapeList at: 2) alignX: 'center'.

container := container copy.
view addShape: container.
container coordinates: 220@140.
(container shapeList at: 2) alignX: 'right'.

For the vertical alignement (alignY:):

view := CadeView new open.

markerDefault := CadeShapeLeaf2D shape: (-2 @ -2 extent: 4 @ 4).
markerDefault fillColor: Color red.

shapeDefault := CadeShapeLabel new.
shapeDefault text: 'Hello World !'.
shapeDefault fontName: 'Arial'.
shapeDefault fillColor: Color black.

containerDefault := CadeShapeContainer new.
containerDefault addShape: markerDefault.
containerDefault addShape: shapeDefault.

container := containerDefault copy.

view addShape: containerDefault.
view addShape: container.

containerDefault coordinates: 60@80.
container coordinates: 220@80.

(container shapeList at: 2) alignY: 'top'.

container := container copy.
view addShape: container.
container coordinates: 220@110.
(container shapeList at: 2) alignY: 'middle'.

container := container copy.
view addShape: container.
container coordinates: 220@140.
(container shapeList at: 2) alignY: 'baseline'.

container := container copy.
view addShape: container.
container coordinates: 220@170.
(container shapeList at: 2) alignY: 'bottom'.

CadeShapeImage

CadeShapeContainer