Constructor for interactive schemes on canvas
Demo: http://nikitchenko.ru/scheme-designer/examples/
- No dependencies
- Render only visible objects
- Responsible
- Objects stored in search tree
- Touch support
- Many api methods and events
1. Link file:
<script src="dist/scheme-designer.min.js"></script>
- Add Markup
<canvas id="canvas" width="800" height="500"></canvas>
for adaptive add wrapper (relative):
<div style="width: 100%; height: 500px; position:relative;">
<canvas id="canvas"></canvas>
</div>
- Init, add objects and render (see examples)
var canvas = document.getElementById('canvas');
var schemeDesigner = new SchemeDesigner.Scheme(canvas, {
scroll: {
maxHiddenPart: 0.85
},
zoom: {
padding: 0.1,
maxScale: 8,
zoomCoefficient: 1.04
},
storage: {
treeDepth: 6
}
});
var schemeObject = new SchemeDesigner.SchemeObject({
x: 0.5 + leftOffset,
y: 0.5 + topOffset,
width: width,
height: height,
renderFunction: renderPlace
});
schemeDesigner.addObject(schemeObject);
schemeDesigner.render();
Option |
Default |
Description |
Scroll |
maxHiddenPart |
0.85 |
Max hidden part on scroll |
Zoom |
padding |
0.1 |
Padding from objects to canvas border |
maxScale |
5 |
Max sale |
zoomCoefficient |
1.04 |
Zoom coefficient (Math.pow(zoomCoefficient, delta)) |
Storage |
treeDepth |
0.6 |
Depth of search tree |
Option |
Default |
Description |
x: number |
|
X position |
width: number |
|
Width |
height: number |
|
Height |
cursorStyle: string |
pointer |
Cursor style on object |
renderFunction: Function(schemeObject: SchemeObject, scheme: Scheme, view: View) |
|
Function for rendering object, see examples |
clickFunction: Function(schemeObject: SchemeObject, scheme: Scheme, view: View, e: Event) |
|
Function for handle click on object |
mouseOverFunction: Function(schemeObject: SchemeObject, scheme: Scheme, view: View, e: Event) |
|
Function for handle mouseover on object |
mouseLeaveFunction: Function(schemeObject: SchemeObject, scheme: Scheme, view: View, e: Event) |
|
Function for handle mouseleave on object |
Examples:
var schemeDesigner = new SchemeDesigner.Scheme(canvas);
SchemeDesigner.setCursorStyle('move');
schemeDesigner.getZoomManager().zoomToCenter(10);
schemeDesigner.getScrollManager().scroll(100, 200);
schemeDesigner.getStorageManager().showNodesParts();
Method |
Return |
Description |
SchemeDesigner |
getEventManager() |
EventManager |
|
getScrollManager() |
ScrollManager |
|
getZoomManager() |
ZoomManager |
|
getStorageManager() |
StorageManager |
|
getWidth() |
number |
Scheme width |
getHeight() |
number |
Scheme height |
clearContext() |
SchemeDesigner |
Clear canvas context |
requestRenderAll() |
SchemeDesigner |
Request redraw canvas |
render() |
|
Request redraw canvas, create search tree and scroll with zoom to center |
addObject(object: SchemeObject) |
|
Wrapper for storageManager.addObject |
removeObject(object: SchemeObject) |
|
Wrapper for storageManager.removeObject |
getObjects() |
SchemeObject[] |
Wrapper for storageManager.getObjects |
removeObjects(object: SchemeObject) |
|
Wrapper for storageManager.removeObjects |
getCanvas() |
HTMLCanvasElement |
Canvas element |
getCanvas2DContext() |
CanvasRenderingContext2D |
Canvas context |
setCursorStyle(cursor: string) |
SchemeDesigner |
Set cursor style |
Scroll manager |
getScrollLeft() |
number |
Left offset |
getScrollTop() |
number |
Top offset |
scroll(left: number, top: number) |
|
Set scroll |
toCenter() |
|
Scroll to objects center |
setMaxHiddenPart(value: number) |
|
Set maxHiddenPart |
Zoom manager |
zoom(delta: number) |
boolean |
Zoom scheme if posible |
setScale(scale: number) |
boolean |
Set scale if posible |
getScaleWithAllObjects() |
number |
Get scale when all objects are visible |
zoomByFactor(factor: number) |
boolean |
Zoom by factor if posible |
getScale() |
number |
Current scale |
zoomToCenter(delta: number) |
|
Zoom to center |
zoomToPoint(point: Coordinates, delta: number) |
|
Zoom to point |
setPadding(value: number) |
|
Set padding |
setMaxScale(value: number) |
|
Set maxScale |
setZoomCoefficient(value: number) |
|
Set zoomCoefficient |
Storage manager |
getObjects() |
SchemeObject[] |
Get all objects |
addObject(object: SchemeObject) |
|
Add object |
removeObject(object: SchemeObject) |
|
Remove object |
removeObjects() |
|
Remove all objects |
findObjectsByCoordinates(coordinates: Coordinates) |
SchemeObject[] |
Find objects by coordinates |
getObjectsBoundingRect() |
BoundingRect | Bounding rect of all objects |
reCalcObjectsBoundingRect() |
| Request fo recalculate bounding rect of all objects |
setTreeDepth(value: number) |
| Set treeDepth |
requestBuildTree() |
| Request rebuild search tree |
getTree() |
TreeNode | Get root tree node |
showNodesParts() |
| Draw rect of nodes for testing |
Event |
Description |
schemeDesigner.beforeRenderAll | Before render all |
schemeDesigner.afterRenderAll | After render all |
schemeDesigner.clickOnObject | Click on object |
schemeDesigner.mouseOverObject | Mouse over on object |
schemeDesigner.mouseLeaveObject | Mouse leave from object |
schemeDesigner.scroll | On scroll |
schemeDesigner.zoom | On zoom |