03 Shapes
Roassal3 has some predefined shapes that can be used by developers.
Instances of RSBoundingShapes has a transformation matrix AthensAffineTransform and a base Rectangle. Bounding shapes have their position on center, then the origin and the corner of this rectangle must be at the same distance.
Instances of RSBox can create a basic rectangle.
canvas := RSCanvas new.
canvas add: (RSBox new
width: 100;
height: 100;
color: Color blue;
position: 100@100).
"size sets the extent for red box"
canvas add: (RSBox new
size: 100;
color: Color red;
position: 0@0).
canvas
Use border: to set the stroke for the shape, you will need to create an instance of RSBorder.
canvas := RSCanvas new.
canvas add: (RSBox new
size: 100;
color: Color red;
border: (RSBorder new
color: Color blue;
width: 5);
position: 0@0).
canvas
Use cornerRadius: and create corners around the box, you can use an instance of RSCornerRadius or a number.
canvas := RSCanvas new.
canvas add: (RSBox new
extent: 300@200;
color: (Color blue alpha: 0.3);
border: (RSBorder new
color: (Color red alpha: 0.3);
width: 5);
cornerRadius: 20;
position: 0@0).
canvas
With an instance of RSCornerRadius you can modify the size of each corner.
...
cornerRadius: (RSCornerRadius new
topLeft: 50;
bottomRight:50);
...
Check examples of RSCornerRadius for more combinations.
An ellipse is closely related to a circle. The difference is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius. In order to modify the x and y radius, users need to use extent:. Additionally ellipses has a method radius: a shortcut to create a circle.
canvas := RSCanvas new.
canvas add: (RSEllipse new
position: -100@ -80;
extent: 200@100;
color: Color yellow;
border: (RSBorder new
color: Color purple;
width: 2)).
canvas 
canvas := RSCanvas new.
canvas add: (RSEllipse new
position: 0@100;
extent: 440@60;
color: 'purple').
canvas add: (RSEllipse new
position: 0@ 70;
extent: 380@40;
color: 'red').
canvas add: (RSEllipse new
position: 0@45;
extent: 340@30;
color: 'yellow').
canvas 
canvas := RSCanvas new.
canvas add: (RSEllipse new
position:40@50;
extent: 440@60;
color: 'yellow').
canvas add: (RSEllipse new
position: 20@ 50;
extent: 380@40;
color: 'white').
canvas 
The RSPolygon shape is used to create a graphic that contains at least three sides. Polygons are made of straight lines, and the shape is "closed" (all the lines connect up). Shapes in Rossal by default uses the fill rule evenodd.
c := RSCanvas new.
points := { 100@10. 40@198. 190@78. 10@78. 160@198 }.
p := RSPolygon new
points: points;
yourself.
c add: p.
p position.
"([email protected])"
p extent.
"([email protected])"
p points.
"{(0.0@ -94.0). ([email protected]). (90.0@ -26.0). (-90.0@ -26.0). ([email protected])}"
c
The position and the extent of this shape is modified by the method points:. Also polygon does not reference the variable points, instead of that it copies a transformed points.
c := RSCanvas new.
p := RSPolygon new
points: { 100@10. 40@198. 190@78. 10@78. 160@198 };
cornerRadii: 10;
yourself.
c add: p.
c showEncompassingRectangles.
p position: 0@0.
c
Additional you can use cornerRadii: in RSPolygon and RSPolyline. cornerRadii: is similar to cornerRadius: but cornerRadius: is a RSBox's method.
RSBitmap allows smalltalk users interact with instances of Form. This roassal shape is similar to RSBox.
canvas := RSCanvas new.
bitmap := RSBitmap new
form: PolymorphSystemSettings pharoLogoForm;
yourself.
bitmap border: (RSBorder new
width: 2;
color: Color red;
yourself).
canvas add: bitmap.
"canvas showEncompassingRectangles."
canvas
With Pharo-Zinc you can download images from web. Wtih ImageReadWriter you can create instances of Form.
members := {
'Stan' -> 'http://tny.im/lVl'.
'Dad' -> 'http://tny.im/lVm'.
'Mom' -> 'http://tny.im/lVn'.
'Grandpa' -> 'http://tny.im/lVo'
}.
canvas := RSCanvas new.
members do: [ :association |
| client image |
(client := ZnEasy client)
url: association value;
accept: ZnMimeType imagePng;
signalProgress: true;
get.
image := ImageReadWriter formFromStream: client entity readStream.
canvas add: (RSBitmap new
model: association key;
popup;
draggable;
form: image;
yourself).
].
RSEdgeBuilder orthoVertical
withVerticalAttachPoint;
canvas: canvas;
width: 2;
useAssociations: {
'Stan' -> 'Dad'.
'Stan' -> 'Mom'.
'Dad' -> 'Grandpa'
}.
RSTreeLayout on: canvas nodes.
canvas @ RSCanvasController.
canvas
The previous example uses RSTreeLayout and interactions like popup, if you set the model of the bitmap shape.
Pie slice is a special shape with alpha angle, beta angle, inner radius and external radius. the encompassing rectangle of this shape is 2 * external radius. By default value for these variables is zero.
Alpha and beta angles should be degrees. If external radius is 150 then the encompassing rectangle of this shape is -150@ -150 corner: 150@150.
canvas := RSCanvas new.
slice := RSPieSlice new.
slice
innerRadius: 100;
externalRadius: 150;
alphaAngle: 15;
betaAngle: 180.
canvas showEncompassingRectangles.
canvas add: slice.
canvas
The angle direction in Roassal is anticlockwise, and the position of this shape is the center of its circle.
where angle 0 is in the point externalRadius@0 and angle 90 is in the point externalRadius negated @ 0
There are 4 combinations to create a pie slice.
c := RSCanvas new.
"slice"
c add: (RSPieSlice new
color: Color green;
position: -100@100;
externalRadius: 100;
innerRadius: 20;
alphaAngle: 0;
betaAngle: 270;
yourself).
"slice"
c add: (RSPieSlice new
color: Color gray;
position: 100@ -100;
externalRadius: 100;
innerRadius: 0;
alphaAngle: 0;
betaAngle: 270;
yourself).
"donut"
c add: (RSPieSlice new
color: Color red;
position: 100@100;
externalRadius: 100;
innerRadius: 50;
alphaAngle: 0;
betaAngle: 360;
yourself).
"circle"
c add: (RSPieSlice new
color: Color blue;
position: -100@ -100;
externalRadius: 100;
innerRadius: 0;
alphaAngle: 0;
betaAngle: 360;
yourself).
c
RSPieSlice supports cornerRadii: to put nice corners to this shape. Use arcRadiusAuto to calculate this value based on external radius.
c := RSCanvas new.
c add: (RSPieSlice new
noPaint;
withBorder;
externalRadius: 100;
cornerRadii: 10;
innerRadius: 20;
alphaAngle: 0;
betaAngle: 270;
yourself).
c
segmentSpacing: is another nice method to separate each pie slice, when you are creating a pie.
c := RSCanvas new.
c add: (RSPieSlice new
color: Color red translucent;
withBorder;
externalRadius: 100;
cornerRadii: 10;
innerRadius: 50;
alphaAngle: 0;
betaAngle: 270;
segmentSpacing: 5;
yourself).
c add: (RSPieSlice new
color: Color blue translucent;
withBorder;
externalRadius: 100;
cornerRadii: 10;
innerRadius: 50;
alphaAngle: 270;
betaAngle: 360;
segmentSpacing: 5;
yourself).
c
you can use labels in roassal with RSLabel class. A roassal label, has its origin in the center, then it is similar to box shape, expect that it contains text in one line. RSLabel has a matrix transformation, then you can apply some transformations. Also RSLabel has fontSize: and fontName:.
canvas := RSCanvas new.
label := RSLabel new.
label text: 'SpringSummer vs FallWinter'.
label color: Color blue.
label rotateByDegrees: -45.
canvas add: label.
canvas
Use encompassingRectangle or textExtents(RSTextExtents) to get bounding information about the text.