RaphaëlTools

RaphaelTools - extansion of JavaScript vector graphic library Raphaël

Examples

Circle, Slider, Button, CheckBox, drag&drop


var w = 300; var h = 220;

var paper = Raphael('raphael-exHome',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();

}

LineSegment, Path


var w = 200; var h = 200;

var paper = Raphael('raphael-exLine',w,h);

var frame = paper.rect(0,0,w,h);

/* point2d */

var p1 = RaphaelTools.Point2d.create(20,10);

var p2 = RaphaelTools.Point2d.create(90,10);

var p3 = RaphaelTools.Point2d.create(30,30);

var p4 = RaphaelTools.Point2d.create(110,60);



/* line */

var l1 = paper.LineSegment(p1,p2);

l1.setWidth(2).magenta();

l1.copy([[p1,p2],[p3,p4]]);



/* path */var path = paper.Path();

path.setNewPath([['M',10,100],['h',100],['l',-50,50],['Z']]);

path.iaddItem(2,1,50);

path.green();

3d drag&drop rotation


var w = 200; var h = 200;

var paper = Raphael('raphael-ex3d',w,h);



p = [[1,0,0,100],[0,1,0,100],[0,0,1,0]]; /*projection matrix*/

p1 = RaphaelTools.Point3d.create(-40,-40,-40,p);

p2 = RaphaelTools.Point3d.create(40,-40,-40,p);

p3 = RaphaelTools.Point3d.create(40,-40,40,p);

p4 = RaphaelTools.Point3d.create(-40,-40,40,p);

p5 = RaphaelTools.Point3d.create(-40,40,-40,p);

p6 = RaphaelTools.Point3d.create(40,40,-40,p);

p7 = RaphaelTools.Point3d.create(40,40,40,p);

p8 = RaphaelTools.Point3d.create(-40,40,40,p);

pts = [p1,p2,p3,p4,p5,p6,p7,p8];

p1.rotX(.2); p1.rotY(.2);

for (var i=0; i-8; i++) { pts[i].update(); };



l = paper.LineSegment(p1,p2).setWidth(2);

l.copy([[p2,p3,p4,p1,p2,p3,p4,p5,p6,p7,p8],[p3,p4,p1,p5,p6,p7,p8,p6,p7,p8,p5]]);

l.update();



var frame = paper.rect(0,0,w,h);

frame.onDragUpdate = function(dx,dy) {

p1.rotX(dy/200);

p1.rotY(dx/200);

for (var i=0; i-8; i++) { pts[i].update(); }

l.update();

}

frame.attr({'cursor':'move','opacity':0.5,'fill':'#eee'}); frame.strokeBlack();

frame.drag(onDragMove,onDragStart);

LineBR (BR = bounding rectangle)


var w = 300; var h = 350;

var paper = Raphael('raphael-exBR',w,h);

var frame = paper.rect(0,0,w,h);



var rect = paper.rect(30,30,240,240);

var lt = RaphaelTools.Point2d.create(30,30);

var rb = RaphaelTools.Point2d.create(270,270);

var lbr1 = paper.LineBR(0,1,-150,lt,rb);

var lbr2 = paper.LineBR(1,0,-150,lt,rb);

lbr1.blue(); lbr2.orange();



var sl = paper.Slider(null,{

  x:20,y:300,val1:0,val2:2*Math.PI,length:200,initVal:0});

var text1 = paper.text(40,330,'Angle:').attr({'font-size':15})

var text2 = paper.text(90,330,'0.00').attr({'font-size':15})



sl.onmove = function() {

var sla = sl.getVal();

text2.attr({'text':Math.round(sla*100)/100});

var c = Math.cos(sla);

var s = Math.sin(sla);

lbr1.setABC(s,c,-s*150-c*150);

lbr2.setABC(c,-s,-c*150+s*150);

}

Contact: e-mail
Last update: 22th August 2011