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

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

©2024 SinLios Soluciones Digitales. All rights reserved. VisualNEO Web™, VisualNEO Win™ and PixelNEO™ are trademarks of SinLios Soluciones Digitales. All other brand or product names are trademarks of their respective holders.