SVG drawing example : Polygons!

[James D Jarvis]

Another demo program showing how to draw SVGs and load them via memory buffer to use SVG as an alternative drawing method.
SVG's can draw polygons with a simple path definition that is mostly string of numbers.
this string "<path  stroke ='#FFFFFF' fill='#FF0000'  stroke-width='3' d ='M 200 200 700 200 700 400 200 400 200 200'/>" would draw a red rectangle with a 3 pixel wide white border if embedded in complete SVG string. The polygon is simply defined as a series of points. The only variation in this series of points is the use of M which tells any program drawing the path to move to the following point instead of drawing to the point.

In this example the subroutione svgpoly$  will take a randomly defined polygons and convert them into an SVGpath description held in a string. The path descriptions will be inserted into a complete SVG definition and loaded into a memory buffer and displayed.

Code: (Select All)

'SVG polygon drawing example

'drawing polygons with paths

'a QB64 example by James D. Jarvis

'works with QB64-PE version 3.9.0 and later



'

'this demonstrates how to use subroutines to build a multiple polygon definitions and combine them into a memory buffer that is

'loaded and displayed



Screen _NewImage(800, 500, 32)

Randomize Timer

Dim si As _Unsigned Long 'the SVG image buffer, it's an image handle like any other

Do

    Cls , _RGB32(Int(Rnd * 256), Int(Rnd * 256), Int(Rnd * 256)) 'clear the screen and fill it with a random color

    ss$ = "" 'the the SVG string

    'build the polygons for the demo

    np = Int(6 + Int(Rnd * 100))

    If Rnd * 100 < 3 Then np = np * 20

    For p = 1 To np

        ss$ = ss$ + svgpoly$(Int(25 + Rnd * (_Width - 50)), Int(25 + Rnd * (_Height - 50)), Int(10 + Rnd * 100), Int(10 + Rnd * 120), (Int(Rnd * 90)), Int(1 + Rnd * 10), _RGB32(Int(Rnd * 256), Int(Rnd * 256), Int(Rnd * 256)), _RGB32(Int(Rnd * 256), Int(Rnd * 256), Int(Rnd * 256)))

    Next p

    'take the polygon defintions and compine them with the rest of the SVG string

    ss$ = "<svg width='" + _Trim$(Str$(_Width)) + "' height='" + _Trim$(Str$(_Height)) + "'>" + ss$ + " </svg>" 'putting all those polygons inside an SVG as large as the window

    si = _LoadImage(ss$, 32, "memory") 'load the svg described in ss$ into memory

    _PutImage (0, 0), si 'put the svg on the screen, using 0,0 because the source SVG is as large as the window

    tt$ = Str$(p) + " polygons": _Title tt$ 'put the polygon count in the window title

    Sleep

    _FreeImage si 'free the image so we can load a new one without wasting memory or if we are exiting the program



Loop Until InKey$ = Chr$(27)

'_CLIPBOARD$ = ss$      'windows users can uncomment the commad on the left to dump the last sbg drawn to their clipboard.



Function svgpoly$ (cx, cy, rr, shapedeg, turn, ww, bklr As _Unsigned Long, fklr As _Unsigned Long)

    'filled rotated polygon returned as a string portion of an svg string buffer

    'cx,cy are center of polygon

    'rr oios radius of polygon

    'shapedeg is the angle forming the basis of the polygon , if it doesn't divide into 360 evenly an irregular polygon will be created

    'turn will be the angle the whole polygon is turned off of 0 degree

    'ww is the width fo the border border stroke of the polygon

    'output returned from theis function will be astring holding an SVG path describing a polygon.

    '

    'define the path that will form the polygon and fill the border and fill colors

    i$ = i$ + "<path  stroke ='" + packcolorN$(bklr) + "' fill='" + packcolorN$(fklr) + "' "

    'add the stroke width

    i$ = i$ + " stroke-width='" + _Trim$(Str$(ww)) + "' "



    'find the 1st point in the polygon

    x = rr * Sin(0.01745329 * turn)

    y = rr * Cos(0.01745329 * turn)

    'tell the svg to draw the path by moving to the first point of the polygon

    i$ = i$ + "d ='M"

    i$ = i$ + Str$(cx + x) + Str$(cy + y) + Str$(cx + x) + Str$(cy + y)

    'find the perimter of the polygon

    For deg = turn To turn + 360 Step shapedeg

        x2 = rr * Sin(0.01745329 * deg)

        y2 = rr * Cos(0.01745329 * deg)

        'record the consecutive points of the polygon  that will be drawn to form the path that defines the polygon perimeter

        i$ = i$ + Str$(cx + x2) + Str$(cy + y2)

    Next

    'close the polyon by drawing to the first point

    i$ = i$ + Str$(cx + x) + Str$(cy + y)

    i$ = i$ + "'/>" 'end the path definition of the polygon

    svgpoly$ = i$ 'return this path holding a polygon definiton to the SVG to be drawn

End Function

Function packcolorN$ (klr As _Unsigned Long)

    'convert an unsigned long color value into a hexidecimal # that will be used in an SVG

    Dim As _Unsigned Long rk, gk, bk

    'get the color channels of the unsinged long color

    rk = _Red32(klr)

    gk = _Green32(klr)

    bk = _Blue32(klr)

    'convert those channel values into hexidecimal

    If rk < 16 Then

        r$ = "0" + Hex$(rk) 'put in a padded hexidcimal value

    Else

        r$ = Hex$(rk) 'put in a 2 digit hexidecimal value

    End If

    If gk < 16 Then

        g$ = "0" + Hex$(gk) 'put in a padded hexidcimal value

    Else

        g$ = Hex$(gk) 'put in a 2 digit hexidecimal value

    End If

    If bk < 16 Then

        b$ = "0" + Hex$(bk) 'put in a padded hexidcimal value

    Else

        b$ = Hex$(bk) 'put in a 2 digit hexidecimal value

    End If

    packcolorN$ = "#" + r$ + g$ + b$

End Function