LiThA-API

From LiThA-Wiki

Jump to: navigation, search

Contents

[edit] Initialization Functions

[edit] new Paint (canvasId, canvasWidth, canvasHeight, workspaceWidth, workspaceHeight, bgColor)

Constructor of canvas object.

  • canvasId - string; id of placeholder <div>. Creator of the webpage should create an empty <div id="any"></div> that would serve as placeholder for drawing canvas;
  • canvasWidth - integer;
  • canvasHeight - integer; Canvas dimension defines physical size of rectangle area on html page, where site visitors can draw. By default, browser should add scrollbars when canvas's size is bigger than actual dimensions of layer;
  • workspaceWidth - integer;
  • wotkspaceHeight - integer; Workspace dimension defines size of the virtual drawing space. Workspace size could differ from canvas size. Use toggleShiftMode() function to allow user to shift workspace in case canvas is smaller than workspace.
  • bgColor - CSS RGB color of background in a new document. Normal and truncated forms of color definitions are allowed (#CCCCCC and #CCC are the same). Special value "alpha" defines transparent document.

[edit] init()

Initializes created canvas object and creates new empty document. Document could be created with background color defined by bgColor parameter of constructor. init() should be the first method called on created canvas object. Any operations on the object are not allowed until initialization.

[edit] Drawing Functions

  • toggleRectMode() - switches drawing canvas into mode where user can draw rectangles with mouse;
  • toggleEllipseMode() - switches drawing canvas into mode where user can draw ellipses;
  • toggleLineMode() - switches drawing canvas into mode where user can draw straight lines;
  • togglePolylineMode() - switches drawing canvas into mode where user can draw polylines;
  • togglePolygonMode() - switches drawing canvas into mode where user can draw polygons;
  • finishPolyline() - terminates polyline or polygon being currently drown. Sometimes it's useful to trigger this function on ESC key press event.
  • toggleBezierMode() - switches drawing canvas into mode where user can draw bezier lines;
  • finishBezier() - terminates bezier being currently drown. Sometimes it's useful to trigger this function on ESC key press event.
  • togglePenMode() - switches drawing canvas into mode where user can draw freehand lines. These lines are approximated to bezier lines on server.

In addition to creating and modifying shapes, every drawing function implies context menu binded to the current focused shape. End user always can access it by clicking on node-point.

[edit] Coordinates Refreshing Function

  • recalcPosition() - recalculates coordinates of drawing canvas.

Drawing canvas receives mouse coordinates related to top-level browser window. During work with the webpage, canvas could change its absolute position (due to dynamic layout modifications, etc). In this case drawing engine should adjust its internal data structures according to new canvas position. recalcPosition() notifies drawing engine to perform such adjustments. You should call recalcPosition() every time position of canvas has been changed. Otherwise, engine would start to draw in wrong place.

[edit] Manipulating Functions

  • toggleSelectionMode() - switches drawing canvas into mode when user can select object with mouse;
  • performUndo() - performs undo of previous operation;
  • performRedo() - performs redo of recent undo operation;
  • performCopy() - copy currently selected shape into clipboard;
  • performPaste() - paste shape from clipboard;
  • deleteFocusedObject() - deletes currently selected object;
  • sendToBack() - sends selected object to the back;
  • sendBackward() - sends selected object one step backward;
  • bringForward() - sends selected object one step forward;
  • bringToFront() - sends selected object to the front;
  • toggleShiftMode() - switches drawing canvas into mode when user can shift workspace by using mouse.

[edit] Text Functions

  • toggleTextMode() - switches drawing canvas to the mode where user can create text objects. First, user should create rectangular area where text will be placed. Text could contain multiple lines. To confirm typing, click anywhere outside typing box;
  • setFontFamily(familyName) - sets font family. Possible values are: "Arial" and "Verdana";
  • setFontSize(fontSize) - sets font size. Possible values are in the following range: "8px" - "100px". Notice trailing "px";
  • setFontWeight(fontWeight) - sets the font weight. Possible values are: "normal", "bold", "bolder" and "lighter";
  • setFontStyle(fontStyle) - sets the font style. Possible values are: "normal", "italic" and "oblique";
  • setTextDecoration(textDecoration) - sets font decoration. Possible values are: "none", "underline", "overline" and "line-through".

[edit] Image Inserting Function

  • insertImage(URL, callbackFunction) - inserts image into document from given URL;
    • URL - string; value that confirms common rules for URL;
    • callbackFunction - function that will be called after operation is complete.

Images of the following formats could be inserted: JPEG, GIF, BMP and PNG. After insertion is completed, callbackFunction called with single integer parameter: 0 - if operation was successful and other value - in case of failure. 

insertImage("http://www.litha-paint.com/img/litha/splash.gif", insertImageCallback);

function insertImageCallback(code) {
  if (code == 0) {
    //success
  } else {
    //failure
  }
}

[edit] Document Manipulating Functions

  • performOpen(URL, fileType, callbackFunction) - opens document from given URL;
    • URL - string; value confirming common rules for URL;
    • fileType - string; Possible values are: "LITHA", "JPEG", "GIF", "BMP" and "PNG". Notice uppercase;
    • callbackFunction - function value. callbackFunction called with single integer parameter after open complete: 0 - if operation was successful and other value - in case of failure. 
performOpen("http://mysite.com/repos/litha_doc", "LITHA", myCallbackFunction);

function myCallbackFunction(code) {
  if (code == 0) {
  // success
  } else {
  // failure
  }
}
  • performSave(fileType, callbackFunction) - saves current document to LiTha's server;
    • fileType - string; Can take on of the following values: "LITHA", "JPEG", "TIFF", "PNG" and "SVG";
    • callbackFunction - function value. callbackFunction called after saving complete with two parameters: code and URL. First parameter - code: 0 - if operation was successful and other value - in case of failure. Second parameter - URL: public URL saved document can be downloaded from. One of the possible actions that callbackFunction can take is to notify host http server with this URL to make server download and save document in its internal storage; 
performSave("SVG", saveDoneNotify);

function saveDoneNotify(code, url) {
  if (code == 0) {
    sendUrlToServer(url);
  } else {
    //try to save later
  }
}

Note: API user should pull saved document from LiThA's server during next one hour. We can not guarantee that the saved document will be stored on our server beyond one hour period.

[edit] Color and Style Functions

  • changeBackgroundColor(bgColor) - changes background color for the current document.
    • bgColor - CSS RGB color of background of the current document. Normal and truncated forms of color definitions are allowed (#CCCCCC and #CCC are the same). Special value "alpha" defines transparent document.
  • setStrokeColor(strokeColor) - sets color for current stroke. Should be applied by applyStroke();
    • strokeColor - CSS RGB color format. Normal and truncated forms of color definitions are allowed. Special value "alpha" defines transparent stroke color.
  • setFillColor(fillColor) - sets fill color for closed shapes. Should be applied by applyFill();
    • fillColor - CSS RGB color format. Normal and truncated forms of color definitions are allowed. Special value "alpha" defines transparent fill color.
  • setStrokeOpacity(opacity) - sets stroke color opacity. Should be applied by applyStroke();
    • opacity - float that is greater or equals 0 and less or equals 1.0;
  • setFillOpacity(opacity) - sets fill color opacity. Should be applied by applyFill();
    • opacity - float that is greater or equals 0 and less or equals 1.0;
  • setFillRule(fillRule) - sets fill rule. Should be applied by applyFill();
    • fillRule - could be "nonzero" or "evenodd". See [SVG Spec] for explanation;
  • setStrokeWidth(strokeWidth) - sets current stroke width. Should be applied by applyStroke();
    • strokeWidth - integer that is greater or equals 1.
  • setStrokeDasharray(strokeDashArray) - sets current stroke dash array. Lines would be drawn dashed according to the specified pattern rather than solid. Should be applied by applyStroke();
    • strokeDashArray - string that consists of space separated integers. Example: "2 1".
  • setStrokeLinecap(strokeLineCap) - sets style of unconnected ends of line for current stroke. Should be applied by applyStroke();
    • strokeLineCap - string. Could be: "round", "butt" or "square".
  • setStrokeLinejoin(strokeLineJoin) - sets style for join of connected segments of line for current stroke. Should be applied by applyStroke();
    • strokeLineJoin - string. Could be "bevel", "miter" or "round".
  • setStrokeMiterlimit(strokeMiterLimit) - sets current stroke miter limit if line join is "miter". Should be applied by applyStroke();
    • strokeMiterLimit - float that is greater or equals 1.0;
  • applyStroke() - actualizes stroke styles such as stroke width, stroke color, stroke opacity, line cap, line join, line dash and miter limit.
  • applyFill() - actualizes fill styles such as fill color and fill opacity.
Retrieved from "http://www.litha-paint.com/api-wiki/index.php/LiThA-API"
Personal tools