Drawing
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
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" |
|
|
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" |
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" |
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" |
|
|
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" |
|
|
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" |
|
|
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. 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: |
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" |
|
|
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" |
|
|
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" |
|
|
Purpose: |
Set the position and dimension of the SVG viewport. |
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" |
|
|
Purpose: |
Restore the position and dimension of the SVG viewport. |
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