Question

我尝试使用rafael库的set（），得到了bbox的奇怪行为，这里是示例（请设置一个i＆gt; 2来查看问题），也放在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++}
 }       
 }

Answer 1

RaphaelJS中存在bbox的已知问题。

pathBBox() returns reference to cached bbox

pathBBox（）返回一个引用而不是缓存的bbox值的副本，这意味着该值可能会被意外写入。

简单修复：

raphael.js - 第1300行

return clone(pth.bbox);

Answer 2

Cyrena关于调整Raphael代码的答案有助于解决我的问题！下面的代码应该克隆一个图像（SVG转换为Raphael系统）很多次，它使部件可以点击。但是直到我发现这篇文章，它才会显示第1张，第2张和第8张图像，奇怪地将其他各种克隆放在x坐标上的-10,000和+20,000,000像素上，远远超出了纸张区域，以及广义代码当我开始克隆时，应该将所有图像都设置为0,0。我很高兴。

但请注意here有一个缺点。直到遇到问题，我才能保留我的目标

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陷入困境

2 个答案: