svg.draw.js - Demo
Rectangle, click to draw
new SVG('rect').size('100%', '100%')
.rect().draw();
Transformed Rectangle, click to draw
new SVG('rect_transformed').size('100%', '100%')
.rect().draw().scale(4).rotation(45);
Polygon, press Enter to finish the shape
var poly1 = new SVG('polygon').size('100%', '100%')
.polygon().draw();
poly1.on('drawstart', function(e){
document.addEventListener('keydown', function(e){
if(e.keyCode == 13){
poly1.draw('done');
poly1.off('drawstart');
}
});
});
poly1.on('drawstop', function(){
// remove listener
});
Ellipse, click to draw
new SVG('ellipse').size('100%', '100%')
.ellipse().draw();
Circle, click to draw
new SVG('circle').size('100%', '100%')
.circle().draw();
Polygon, aligned at grig
var poly2 = new SVG('polygonGrid').size('100%', '100%')
.polygon().draw({snapToGrid:20});
poly2.on('drawstart', function(e){
document.addEventListener('keydown', function(e){
if(e.keyCode == 13){
poly2.draw('done');
poly2.off('drawstart');
}
});
});
poly2.on('drawstop', function(){
// remove listener
});
Polygon, aligned at grig on ctrl-down
var poly3 = new SVG('polygonGridOnCtrl').size('100%', '100%')
.polygon().draw({snapToGrid:20});
poly3.on('drawstart', function(e){
document.addEventListener('keydown', function(e){
if(e.keyCode == 13){
poly3.draw('done');
poly3.off('drawstart');
}
if(e.keyCode == 17){
poly3.draw('param', 'snapToGrid', 20);
}
});
document.addEventListener('keyup', function(e){
poly3.draw('param', 'snapToGrid', 1);
});
});
poly3.on('drawstop', function(){
// remove listener
});
Rectangle, mousedown/move/up to draw
var drawing = new SVG('rectNoClick').size('100%', '100%');
var rect = drawing.rect();
drawing.on('mousedown', function(e){
rect.draw(e);
}, false);
drawing.on('mouseup', function(e){
rect.draw('stop', e);
}, false);
rect.on('drawstop', function(){
// remove listener
});