inkapi v1.0.8

Project Title

Inke drawing APIs

Description

APIs about drawing or resize graph. You can use drawing APIs to graphing on canvas.

Getting Started

Dependencies

You need install Node js first

Installing

npm install inkapi

API Introducation and Quick Example

1. First import class Stemcanvas import { Stemcanvas } from 'inkapi';

2. new Stemcanvas and initialisecanvas with five canvasIds in your local html let drawingcanvas = new Stemcanvas(); drawingcanvas.initialisecanvas(drawingcanvasId :string, interfacecanvasId :string, cursorcanvasId: string, selectioncanvasId: string, canvasbackgroundId: string,width :number,height :number)

   drawingcanvasId: Canvas for rendering drawing strokes interfacecanvasId: Canvas for rendering the proccess when drawing cursorcanvasId: Canvas for cursor showing via different states selectioncanvasId: Canvas for rendering the bondingbox and previewstroke when moving or resizing canvasbackgroundId: Canvas for background

3. call the draw APIs for drawing graphic drawingcanvas.drawStorke(strokeColor,strokeWidth); drawingcanvas.drawRectangle(strokeColor,strokeWidth); drawingcanvas.drawLine(strokeColor,strokeWidth); drawingcanvas.drawCircle(strokeColor,strokeWidth);

4. call the erase for erase stroke drawingcanvas.erase();

5. call the select for select strokes, then you can move or resize the strokes drawingcanvas.select();

6. Set stroke color drawingcanvas.setColor(this.toolbox.selectedColour); Set stroke width size drawingcanvas.setSize(this.toolbox.selectedDrawSize);

7. Clear all the strokes on the canvas drawingcanvas.clearcanvas();

8. Undo or redo the action drawingcanvas.undo(); drawingcanvas.redo();

9. Copy and paste the selected strokes drawingcanvas.copy(); drawingcanvas.paste();

10. Upload all the drawing data using JSON drawingcanvas.uploadData(deviceType,task,token,isSaveLocal); //deviceType : like "iPhone" or "iPad" //task: for identify the html like "lq1" //token: session token //isSaveLocal: boolean if the file need to be saved at local file system

11. Set canvas background picture drawingcanvas.canvasBackgroundSwitch(ImagePath); //ImagePath: like "./media/canvasBG/25px-MM-grid.png"

Help

browserify maybe needed (browserify main.js -o bundle.js）

Authors

Eric.Hu

Version History

1.0.4 uploadData add isSaveLocal parameter (TODO) 1.0.3 Add select(resize)/unredo/clear/setColor/setSize/erase/background APIs 1.0.2 Add drawing APIs 1.0.1 Initial Release

License

This project is licensed under the ISC License

Acknowledgments

Athar and Rachel