0

我尝试使用 rafael 库的 set()，得到了 bbox 的奇怪行为，这里是示例（请设置 a i>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++}
 }       
 }
4

2 回答 2

3

RaphaelJS 中的 bbox 存在一个已知问题。

pathBBox() 返回对缓存 bbox 的引用

pathBBox() 返回的是引用而不是缓存的 bbox 值的副本，这意味着该值可能会被意外覆盖。

简单修复：

raphael.js - 第 1300 行

return clone(pth.bbox);
于 2012-07-30T17:13:06.180 回答
0

Cyrena 关于调整 Raphael 代码的答案帮助解决了我的问题！下面的代码应该多次克隆图像（将 SVG 转换为 Raphael 系统），并使部分可点击。但在我找到这篇文章之前，它只会显示第 1、2 和 8 张图像，并且奇怪地将各种其他克隆放置在 x 坐标上的 -10,000 和 +20,000,000 像素处，远远超出纸张区域和通用代码当我开始克隆时，应该所有到 0,0 的图像都不起作用。我很开心。

但是请注意这里指出的一个缺点。在我遇到问题之前，我会保持我已经开始做的事情

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);
}


}
于 2012-07-31T04:26:03.017 回答