RaphaëlForm

Extension of Javascript vector graphics library Raphaël for HTML FORM elements.

RaphaëlForm is an extending library to JavaScript vector graphic library Raphaël created for using HTML FORM elements inside SVG canvas. With this extension, you can easily create and manage labels, text entries, select menus etc. (like here). Just download the raphaelform.js file and place it into your HTML document. The raphael.js file has to be loaded first. The usage is very simple:


var paper = Raphael('div-raphael',400,400); 

paper.rect(0,0,400,400); 

var hlp = paper.set( 

paper.path('M65,20,l10,-3,v-7h150v20h-150v-7Z').attr({'stroke-width':2,fill:'cyan'}), 

paper.text(150,20,'some help message').attr({'font-size':15}) 

).hide(); 

RaphaelForm.label(paper,'Label_1').attr({ 

x:10,y:10,width:150,fontSize:15,cursor:'help' 

}).onmouseover(function(){hlp.show()}).onmouseout(function(){hlp.hide()}); 

var ell = paper.ellipse(200,200,100,75).attr({fill:'cyan'}); 

var t = paper.text(200,200,'Text value').attr({'font-size':10}); 

var ti = RaphaelForm.inputText(paper,'Text value').attr({x:10,y:35,width:150,height:20,fontSize:15}); 

ti.onchange(function(){t.attr({text:ti.value()})}); 

var select1 = RaphaelForm.select(paper,['10','20','30','40']).attr({x:10,y:65,fontSize:15,height:20,width:150}); 

select1.onchange(function(){t.attr({'font-size':select1.value()})}); 

var select2 = RaphaelForm.select(paper,['small','medium','big','BIG'],{values:[100,125,150,175]}); 

select2.attr({x:10,y:90,fontSize:15,height:20,width:150}); 

select2.onchange(function(){var v=select2.value(); ell.attr({rx:v,ry:.75*v});});

RaphaëlForm is a free software distributed under GNU LGPL license.

Currently implemented features:

Label,
Select,
InputText.

See documentation and/or examples for more information.