Getting Started
How to use this Documentation
The library does not contain classes!
Similar to the logic introduced by Javascript, there are no classes to be used in this library. At first this can be a little confusing to someone that is used to Object Oriented Programming.
What you need to understand is that although there are no classes, objects do still exist.
The only difference is that all needed objects are already created by the library, so you can use them from the beginning as long as you import the engine .js file. This help file is designed in a way that will ease the transition from traditional OOP to that of Javascript.
So when you see classes, you should think of objects and properties, while methods are replaced by functions which is essentially the same.
There are a few basic objects that you can use from within your website. These objects are included as properties in the GlobalsObj class.
You can use for example:
var radians = vdgeo.DegreesToRadians(45);
or
var vdcanvas = vdmanager.AttachCanvas("canvasID");
You can find the full documentation of these global objects in their corresponding classes.
The vdrawObject
Something that you'll surely need to use is the vdrawObject.
This is the equivalent of the .Net component's vdDocument.
Much of the VectorDraw web library's functionality is offered through this property.
You can find full documentation in the vdrawObj class.
To use the vdrawObject you need to get it via the vdmanager object as follows:
var vdcanvas = vdmanager.vdrawObject('canvas');
vdcanvas.New();
setTimeout(vdcanvas.redraw);//it is recommended to call the redraw method inside setTimeout to avoid to block the procedure of your code.
The Document Object Model
You can access the Document selected to the vdrawObject via the vdcanvas GetDocument method.
This is the equivalent of the VectroDraw .Net component's vdDocument.
The document's object model has mostly the same structure of properties as VectroDraw .Net component's vdDocument object
When you initialize a new vdrawObject, you need to call the New or SelectDocument or SelectDocumentBlob methods in order to selecy a document to web control.
These methods are Asynchronous , so you need to wait for the vdAfterOpenDocument event to be fired before you can access the document's object model.
Example of a simple html page with a canvas and a vdrawObject:
<!DOCTYPE html>
<html>
<head>
<script src="../webControl/vdWebControl.js"></script>
<script type="text/javascript">
var vdcanvas; // keep the vdcanvas control global for quick access inside the functions since it is the only one in the this page
function vdrawInitPageLoad() {//Intiallize theweb control inside this function.It must be called inside onload event of this page
vdcanvas = vdmanager.AttachCanvas("canvas"); //create a new web control andattch it to the canvas elemement
//intialize the event handlers for the web control events to be able to print any info or errors to the info label and to add some entities to the model space after opening the document
vdcanvas.vdAfterOpenDocument = _vdAfterOpenDocument;
vdcanvas.vdprogress = _progress;
vdcanvas.vdPrompt = _onprompt;
vdcanvas.vdError = _vdError;
vdcanvas.New();// Select a new document with basic settings to start with and with no entities in it's model space
////Instead you can try to select an exisiting document
//vdcanvas.SelectDocument("./mydocument.vds");//select an existing document relative to the page path. You can also select a document from a url path
}
this.printInfo = function (text) {
info.innerHTML = ":" + (text ? text : "");
}
function _vdError(sender, ErrCategoryId, statusId, info) {
var msg = "";
if (ErrCategoryId == vdConst.Err_LoadFile) msg += "Error Loading file. ";
msg += "Error status code = " + statusId.toString() + ". ";
if (info != undefined) msg += info;
printInfo(msg);
}
function _onprompt(sender, msg) {
printInfo(msg);
}
function _progress(evt) {
if (evt.percent < 0) printInfo(evt.Info);
else if (evt.percent >= 100) printInfo('');
else printInfo(evt.Info + " " + evt.percent.toString() + "%");
}
function _vdAfterOpenDocument() {
var document = vdcanvas.GetDocument();
//add some lines to the document
var line1 = vdcanvas.AddLine([0, 0, 0], [5, 0, 0]);
var line2 = vdcanvas.AddLine([0, 5, 0], [5, 5, 0]);
//print the number of entities in the model space to the info label
var nItems = document.Model.Entities.Items.length; //this should be 2 since we added 2 lines to the model space
printInfo('Document model contains ' + nItems + ' Entities');
vdcanvas.zoomExtents();//first set the view to extents to make sure the lines are visible then zoom in to see the effect of zooming
vdcanvas.zoomScale(vdcanvas.canvas.width * 0.5, vdcanvas.canvas.height * 0.5, 2);
}
</script>
</head>
<body onload="vdrawInitPageLoad()">
<div>
<label id="info">:</label>
</div>
<div>
<canvas id="canvas" width="1000" height="700"> </canvas>
</div>
</body>
</html>
Delegates, events and event arguments
While reading this help file, you'll notice three kinds of elements more.
The delegates are, as people that use C# possibly know, a way to define functions with very specific footprint.
The use of these delegates here is only symbolic, as there are no delegates supported by Javascript.
These delegates describe how an event handler should be created.
Event handler is the function that is exectuted when an event is fired.
For example, if you need to handle the vdclick event, you should create a function described by the vdclickDelegate like this:
function init()
{
var vdcanvas = vdmanager.vdrawObject('canvas');
vdcanvas.New();
setTimeout(vdcanvas.redraw);
vdcanvas.vdclick = clickHandler;
}
function clickHandler(eventArgs)
{
...
}
Simple as that. Now every time the vdclick event is fired, the clickHandler function will be executed.
As you understand, delegates are present in this help file in order to guide you to write your event handlers correctly.
Similar to the delegates, the TouchEventArgs, vdmouseoverEventArgs and progressEventArgs classes are there to inform you about what properties you can use everytime an event hanlded via a handler.
Same goes for the BaseActionObj class, which describes all the properties of an action object.
Add License to your pages
See the property of licval
Localization
The only localization supported by the VectorDraw web library is that of the prompt messages when a user action is started see MessagesDictionary
Disribution
You must include the vdWebControl.js file in your project and reference it in your html page as shown in the example above.
Also you need to include the \res folder in the same path as vdWebControl.js which mainly contains the default vddocument.vds used by the method New.