Drawing commands allow to add SVG drawings on run time.
Each draw command will generate a new drawing object you can later manipulate.
Most of the general Objects commands will work with drawing commands, so you can add events to them or change their position and how they look using SetObjectAttribute command.


Sample apps:
https://visualneo.com/tutorials/drawinteractive
https://visualneo.com/tutorials/drawplot
https://visualneo.com/tutorials/mouseposition


DrawRect

Purpose:

Draw a rectangle.

Category:

Drawing.

Syntax:

DrawRect "RectangleObject" "rectName" "x" "y" "width" "height" "stroke" "stroke-width" "fill"

RectangleObject

A Rectangle Object to serve as a drawing canvas.

rectName

Name for the rectangle (optional, will allow to programmatically modify it later)

x

Top left x coordinate

y

Top left y coordinate

width

Rectangle width

height

Rectangle height

stroke

Stroke color

stroke-width

Stroke with

fill

Fill color

Example:

DrawRect "Rectangle1" "myrect" "20" "30" "150" "80" "red" "2" "blue"



DrawCircle

Purpose:

Draw a circle.

Category:

Drawing.

Syntax:

DrawCircle "Rectangle Object" "circleName" "cx" "cy" "r" "stroke" "stroke-width" "fill"

RectangleObject

A Rectangle Object to serve as a drawing canvas.

circleName

Name for the circle (optional, will allow to programmatically modify it later)

cx

Circle center x coordinate

cy

Circle center y coordinate

r

radius

stroke

Stroke color

stroke-width

Stroke with

fill

Fill color

Example:

DrawCircle "Rectangle1" "circle1" "50" "50" "40" "blue" "2" "red"

       

DrawEllipse

Purpose:

Draw an ellipse.

Category:

Drawing.

Syntax:

DrawEllipse "Rectangle Object" "ellipseName" "cx" "cy" "rx" "ry" "stroke" "stroke-width" "fill"

RectangleObject

A Rectangle Object to serve as a drawing canvas.

ellipseName

Name for the ellipse (optional, will allow to programmatically modify it later)

cx

Ellipse center x coordinate

cy

Ellipse center y coordinate

rx

Ellipse horizontal radius

ry

Ellipse vertical radius

stroke

Stroke color

stroke-width

Stroke with

fill

Fill color

Example:

DrawEllipse "Rectangle1" "ellipse1" "100" "80" "40" "80" "blue" "2" "red"

       

DrawLine

Purpose:

Draw a line.

Category:

Drawing.

Syntax:

DrawLine "RectangleObject" "lineName" "x1" "y1" "x2" "y2" "stroke" "stroke-width"

RectangleObject

A Rectangle Object to serve as a drawing canvas.

lineName

Name for the line (optional, will allow to programmatically modify it later)

x1

Initial point x coordinate

y1

Initial point y coordinate

x2

Final point x coordinate

y2

Final point y coordinate

stroke

Stroke color

stroke-width

Stroke with

Example:

DrawLine "Rectangle1" "line1" "10" "10" "120" "80" "red" "2"




DrawPolyLine

Purpose:

Draw a polyline (any shape with straight lines)

Category:

Drawing.

Syntax:

DrawPolyLine "Rectangle Object" "polylineName" "points" "stroke" "stroke-width"

RectangleObject

A Rectangle Object to serve as a drawing canvas.

polylineName

Name for the polyline (optional, will allow to programmatically modify it later)

points

Comma separted points coordinates (x,y pairs: x1,y1,y2,y2,x3,y3...)

stroke

Stroke color

stroke-width

Stroke with

Example:

DrawPolyLine "Rectangle1" "polyline1" "10,10,100,10,100,100,10,10" "red" "2"




DrawPolygon

Purpose:

Draw a polygon (closed shape with straight lines)

Category:

Drawing.

Syntax:

DrawPolygon "Rectangle Object" "polylineName" "points" "stroke" "stroke-width" "fill"

RectangleObject

A Rectangle Object to serve as a drawing canvas.

polygonName

Name for the polygon (optional, will allow to programmatically modify it later)

points

Comma separted points coordinates (x,y pairs: x1,y1,x2,y2,x3,y3...)

stroke

Stroke color

stroke-width

Stroke with

fill

Fill color

Example:

DrawPolygon "Rectangle1" "polygon1" "10,10,100,10,100,100,10,10" "red" "2" "yellow"




DrawPath

Purpose:

Draw a complex path using drawing commands

Category:

Drawing.

Syntax:

DrawPath "RectangleObject" "drawpathName" "d" "stroke" "stroke-width" "fill"

RectangleObject

A Rectangle Object to serve as a drawing canvas.

drawpathName

Name for the path (optional, will allow to programmatically modify it later)

d

Draw commands.
The following commands are available for path data:

    M = moveto

    L = lineto

    H = horizontal lineto

    V = vertical lineto

    C = curveto

    S = smooth curveto

    Q = quadratic Bézier curve

    T = smooth quadratic Bézier curveto

    A = elliptical Arc

    Z = closepath

Note: All of the commands above can also be expressed with lower letters. Capital letters means absolutely positioned, lower cases means relatively positioned.

stroke

Stroke color

stroke-width

Stroke with

fill

Fill color

Example:

DrawPath "Rectangle1" "path1" "M150,0 L75,200 L225,200 Z" "red" "2" "yellow"

More Info:

https://css-tricks.com/svg-path-syntax-illustrated-guide/


DrawImage

Purpose:

Draw an image from an external source file (.svg .jpg or .png)

Category:

Drawing.

Syntax:

DrawImage "rectangleObject" "imageName" "imageSourceFile" "x" "y" "width" "height"

RectangleObject

A Rectangle Object to serve as a drawing canvas.

imageName

Name for the image (optional, will allow to programmatically modify it later)

x

Top left x coordinate

y

Top left y coordinate

width

Image width

height

Image height

Example:

DrawRect "Rectangle1" "myrect" "c:\myimages\picture.svg" "20" "30" "250" "200"




DrawText

Purpose:

Draw a text into a specific coordinate with some style properties

Category:

Drawing.

Syntax:

DrawText "rectangleObject" "textName" "Text" "x" "y" "fill" "font-size" "font-family" "angle"

RectangleObject

A Rectangle Object to serve as a drawing canvas.

textName

Name for the text (optional, will allow to programmatically modify it later)

Text

Text to write

x

Bottom left x coordinate

y

Bottom left y coordinate

fill

Fill color

font-size

Font size (20px...)

font-family

Font family (verdana, arial, times new roman...)

angle

Angle in degrees

Note: Use SetObjectCSS and AddClass commands for further text styling

Example:

DrawText "Rectangle1" "text1" "Hello world!" "10" "50" "red" "30px" "45"





DrawClear

Purpose:

Delete any drawing in a Rectangle object

Category:

Drawing.

Syntax:

DrawClear "rectangleObject"

RectangleObject

A Rectangle Object that serves as a drawing canvas.

Example:

DrawClear "Rectangle1"




SetViewBox

Purpose:

Set the position and dimension of the SVG viewport.
It allows to zoom in and zoom out the whole drawing or clipping a selection.

Category:

Drawing.

Syntax:

SetViewBox "rectangleObject" "x" "y" "width" "height"

RectangleObject

A Rectangle Object that serves as a drawing canvas.

x

View box top left x coordinate

y

View box top left y coordinate

width

View box width

height

View box height

Example:

SetViewBox "Rectangle1" "0" "0" "300" "300"




RestoreViewBox

Purpose:

Restore the position and dimension of the SVG viewport.
Returns to normal zoom and image clipping.

Category:

Drawing.

Syntax:

RestoreViewBox "rectangleObject"

RectangleObject

A Rectangle Object that serves as a drawing canvas.

Example:

RestoreViewBox "Rectangle1"



Created with the Personal Edition of HelpNDoc: Easily create HTML Help documents