Road Signs Tutorial

From Progzoo
Jump to: navigation, search

Diversion Square

Draw the yellow square using fillRoundRect

  • The yellow square has side 150, the radius of the corner is 40.
  • The black square is 100, the line width is 15.
  • The yellow is rgb(255,227,0).
  • The whole image is 166x166

Froaddiversionsquare.png

[Font] [Default] [Show] [Resize] [History] [Profile]

No Entry

Red circle with white rounded rectangle. The red disk has diameter 150. The rectangle is 130 by 30, the corner radius is 10.

Noentry.png


[Font] [Default] [Show] [Resize] [History] [Profile]

No Waiting

The circle has diameter 150, the border and band are 16 wide. Red is rbg(235,21,28) blue is rgb(0,111,187).

Nowaiting.png


[Font] [Default] [Show] [Resize] [History] [Profile]

No Through Road

The blue sign is 150 by 150 the corners have radius 10. The leg of the T is 22 by 88. The top of the T is 76 by 28. The white border around the red rectangle is 2 wide. The colour red is rgb(225,0,21), blue is rgb(7,89,172).

Nothroughroad.png


[Font] [Default] [Show] [Resize] [History] [Profile]

Road Warning

The base of the triangle is 120. The height of the triangle is (int)(120*Math.sqrt(3)/2) The border is 12 wide.

Roadwarning2.png


[Font] [Default] [Show] [Resize] [History] [Profile]

Each of these road signs is worth 14 points.

Countdown 3

You can use a combination of translate and rotate to put the rectangles in place.

  • Blue is RGB (0,111,187)
  • The blue rectangle is 130 by 230
  • The white rectangles are 116 by 20
  • The white rectangles are at an angle of 0.502 radians.
  • The white rectangles are 50 apart vertically.

Countdown3.png


[Font] [Default] [Show] [Resize] [History] [Profile]

Lane Closure

Try to avoid repeating code - you can use variables or methods to repeat a shape.

Foadlaneclosure.png

[Font] [Default] [Show] [Resize] [History] [Profile]

No Traffic Lights

No traffic lights.

Foadnotrafficlights.png

[Font] [Default] [Show] [Resize] [History] [Profile]

Level Crossing

Foadlevelcrossing.png

[Font] [Default] [Show] [Resize] [History] [Profile]

Level Crossing without Barrier

Define a hexagon and fill it twice - at different angles. Then fill two white rectangles on top.

Foadlevelcrossing3.png

[Font] [Default] [Show] [Resize] [History] [Profile]

Each of these road signs is worth 20 points.

Ice

Take advantage of the symmetry of this image.

Froadice.png

[Font] [Default] [Show] [Resize] [History] [Profile]

Zone ENDS

You can calculate the width of the text using the stringWidth method of the FontMetrics class. You can use this figure to calculate where to place text that should be in the centre.

Foadzoneends.png

[Font] [Default] [Show] [Resize] [History] [Profile]

Diversion Northtown

Notice how the black border is curved inside and out.

Foaddiversionnorthtown.png

[Font] [Default] [Show] [Resize] [History] [Profile]

Swing Bridge

Foadswingbridge.png

[Font] [Default] [Show] [Resize] [History] [Profile]

Turpin's Crossing

You are not asked to do this because it is easy. You are asked to do it because it is hard.

Foadturpin.png

[Font] [Default] [Show] [Resize] [History] [Profile]