RaphaëlTools
RaphaelTools - extansion of JavaScript vector graphic library Raphaël
RaphaëlTools is an extending lirary to JavaScript vector graphics library Raphaël. The purpose is to create "classes" that are easy to maintaine in interactive framework. Also sliders and .buttons are provided to create them directly in Raphaël code without need of communication with other browser's elements. Just download the raphaeltools.js file and place it into your HTML document. The raphael.js file has to be loaded first. The usage is very simple:
var w = 300; var h = 220;
var paper = Raphael('div-raphael',w,h);
var frame = paper.rect(0,0,w,h);
/* setting color and width shortcuts*/
frame.setWidth(7);
frame.strokeBlue;
/* circle,drag&drop */
var circ = paper.Circle(50,50,25);
circ.fillBlue();
circ.onDragUpdate = function(dx,dy) { circ.translate(dx,dy); };
circ.drag(onDragMove,onDragStart);
circ.attr({'cursor':'move'});
/* slider */
var hslider = paper.Slider(null,{x:20,y:130,val1:50,val2:270});
var tr = paper.TextBox({
x:hslider.getX()-20,y:145,width:40,height:22,str:Math.round(hslider.getVal()),textAttrs:{'font-size':20}});
hslider.onmove = function() {
tr.x=hslider.getX()-20; tr.setStr(Math.round(hslider.getVal())); }
/* checkbox */
paper.text(180,190,'set circ x\nwith animation').attr({'font-size':15,'text-anchor':'start'});
var cBox = paper.CheckBox({x:150,y:180,dim:20});
/* button */
var button = paper.Button({x:20,y:180,str:'set circ x'})
button.onClick = function() {
circ.x = hslider.getVal();
cBox.isChecked? circ.animate({'cx':circ.x},500,'<>') : circ.update();
}
RaphaëlTools is a free software distributed under GNU LGPL license.
Currently implemented "classes" are:
- Color and width setting shortcuts
- Generic support for drag&drop manipulation
- Point
- Line (connecting 2 points)
- Line (infinte line clipped in bounding rectangle)
- Path
- Circle
- Text in rectangular frame
- Slider
- Button
- Very basics of 3d graphics
- Legend
- Check box
See documentation and/or examples for more information.
