raphaeljs bbox trouble in set

Question

I tried to use set() of rafael library, got strange behavior of bbox, here is example (please set a i>2 to see the problem), also placed on jsfiddle http://jsfiddle.net/Uue5h/46/

var paper=Raphael("out",320,200);
var box=paper.rect(50,50,30,30);
var lx=0;
 var ly=0;
 //just to have placement
 var bx=box.getBBox().x;
 var by=box.getBBox().y;
 var pset=paper.set();
 for (var i=0;i<6;i++) {
   //place a box to randmom place;
   var newbox=paper.rect(Math.round(Math.random()*100),Math.round(Math.random()*100),10,10);
    //translate it once to be sure that it is not because it was translated
    newbox.translate(10,10);
        pset.push(newbox);

 }
 //set here i<2 to see a problem
 for (var i=0;i<1;i++) {
    //place items in rows;
 for (var nn in pset.items) {
    //new placement calculate;
       var nx=bx+lx*32;
       var ny=bx+ly*32;
       var cb=pset[nn];
    //here the problem !
    //if called second time the returnded bbx looks incorrect
       var bbx=cb.getBBox();
    //calculate translate coordinates
       var tx=nx-bbx.x;
       var ty=ny-bbx.y;
    //translate item
       cb.translate(tx,ty);
    //shift it to front
       cb.toFront();   
    //calculate row/col    
       lx++;
    if (lx>=2) {lx=0;ly++}
 }       
 }

What are you trying to accomplish? I don't know what the problem is because I don't know what the expected outcome is. — vcsjones, Jul 30 '12 at 15:21

score 3 · Accepted Answer · answered Jul 30 '12 at 17:13

There is a known problem with bbox in RaphaelJS.

pathBBox() returns reference to cached bbox

pathBBox() is returning a reference rather than a copy of the cached bbox value, which means the value can be accidentally written over.

Simple fix:

raphael.js - line 1300

return clone(pth.bbox);

score 0 · Answer 2 · edited May 23 '17 at 12:13

The answer from Cyrena about adjusting the Raphael code helped solve my problem! The code below is supposed to clone an image (SVG converted to Raphael system) a bunch of times, and it makes the parts clickable. But until I found this post, it would only display the 1st, 2nd, and 8th image, and strangely placed the various other clones at like -10,000 and +20,000,000 pixels on the x coordinate, well outside the paper region, and the generalized code that's supposed to all images to 0,0 wasn't working when I started cloning. I'm so happy.

However note there a drawback noted here. Until I encounter problems, I'm keeping what I've got going

window.onload = function () {


var paper = null; 

paper = Raphael('canvas', 1000,400);
var paper_border = paper.rect(0,0,1000,400);

var env_set = [];

paper.setStart();
Obj=paper.path('M 163.4 14.6 C 165.5 18.1 164.8 183.6 162.1 190.1 C 159.9 195.3 90 253.4 86.4 254.9 C 39.1 254.6 7.3 237.4 2 228.3 C 0 216.9 1.7 40.8 3.6 37.1 C 5.3 33.9 94.7 1.9 97.8 1.1 C 100.6 0.5 161 10.8 163.4 14.6Z');
Obj.attr({'fill':'#c7c7c7','stroke':'none'});
env_set[1] = paper.setFinish();

for (i=2; i<10; i++){
    env_set[i] = env_set[1].clone();
}


/*********************************************************************************
The below lines use the set to transform your SVG to:
Translate (Move) your image to the top left of the paper.
*********************************************************************************/
for (i=1; i<10; i++){
    //alert(env_set[i].getBBox().x);
    env_set[i].transform('T'+(-1*env_set[i].getBBox().x)+200*i+','+(-1*env_set[i].getBBox().y));

}


/*********************************************************************************
The below lines use the set to add event handlers.
As you mouseover the above code window vectors they change colour.
If your trying to locate a path, click on the vector image above...
*********************************************************************************/
function callback(member)
{
member.mouseover(function (e) {  this.ofill=this.attr('fill');this.attr({fill:'#000000'}); });
member.mouseout(function (e) { this.attr({fill:this.ofill}); });
member.click(function (e) { var thisPath=this.attr('path');alert('You just clicked on Element #'+this.id+'.To help you find it in the code its path starts with......'+thisPath); });
}

for (i=1; i<10; i++){
    env_set[i].forEach(callback);
}


}

raphaeljs bbox trouble in set

2 Answers2