Diagramo-core

A canvas backed vector-graphic drawing tool, with event listeners. Based on (Diagramo by Scriptoid)[http://diagramo.com/].

A Fully extendable library, define your own figures, primitives, events, etc.

Install

npm install diagramo-core

Usage

Diagramo is a client side library for drawing onto a canvas.

Basic usage/setup

var DIAGRAMO = require("diagramo-core");
var canvas = document.createElement("canvas");
canvas.id = "MyCanvas";
canvas.width = 100;
canvas.height = 100;
document.body.appendChild(canvas);
var diagramo = DIAGRAMO.getDiagramo(canvas);
var text = new DIAGRAMO.Text("Hello World", 50, 50, "Arial");
diagramo.addPaintable(text);
diagramo.repaint();

Events

text.mouseDown(function(event){
    this.style.fillStyle = "#ff0000";
});

Primitives

Provides a set of basic primitives which can be used to create complex figures:

• Line
• Polyline
• Polygon
• Arc
• Ellipse
• CubicCurve
• QuadCurve
• Path
• Text

Diagram Editor

An extension of this library for drawing diagrams with connectors, commands, property editing, etc is provided in (diagramo-editor)[https://bitbucket.org/znewsham/diagramo-editor].