1

嗨，我目前正在开发一个包含 Raphael JS 的 facebook 应用程序。用户可以在画布周围单击和拖动几何形状，然后将坐标存储在外部数据库中。出于某种原因，在我的一位同事的一台机器上，每次用户与使用 Raphael js 库绘制的形状进行交互时，元素都会跳转到画布的左上角。在所有其他机器上，元素在单击时保持原位，用户可以按预期拖动对象。

是否有一个原因？我检查了开发人员日志，没有明显错误。也没有警告或类似的东西。我使用的唯一添加的库是 FreeTransform https://github.com/ElbertF/Raphael.FreeTransform

任何投入将不胜感激！

编辑

这是我用来初始化我的形状的代码。我正在循环一系列数组项并生成许多元素。

for (i in fb_circs){
    var s = paper.set();
    var c = paper.circle(fb_circs[i].x, fb_circs[i].y, fb_circs[i].r); c.title = fb_circs[i].id; c.p_set = s;
    var n = paper.circle(fb_circs[i].x, fb_circs[i].y, fb_circs[i].r); n.title = fb_circs[i].id; n.p_set = s;
    var l = paper.text(fb_circs[i].x, fb_circs[i].y, fb_circs[i].title.replace(/ /g,'\n')).attr({fill: fb_circs[i].tColour, 'font-size': fb_circs[i].font}); l.title = fb_circs[i].id; l.p_set = s;
    c.attr({"fill": fb_circs[i].f, "stroke": fb_circs[i].s, "stroke-width": fb_circs[i].swidth });
    n.attr({"fill": "#fff", 'fill-opacity': 0, 'opacity':0, "stroke": fb_circs[i].s, 'stroke-width':fb_circs[i].swidth });
    s.main_type = 'circle set';
    s.push(c); s.push(n); s.push(l);
    var f = paper.freeTransform(s, { keepRatio: true, drag: 'self', draw: [ 'bbox', 'circle' ] }, function(f, events){ });
    f.attrs.rotate = fb_circs[i].rotate; f.apply();

    f.setOpts({drag:'self', scale:false, rotate:false, draw:false}, function(f, events){
        var evt = String(events);
        if (evt.indexOf('end') == -1) return false;
        if (selected_circ == null) return false;
        if (!$('.colorpicker').is(':visible')) sets[selected_circ].last_rotate = f.attrs.rotate;
        if (editingCirc == 0) updateCirc(selected_circ);
    });

    s.id = fb_circs[i].id;
    s.primary_colour = fb_circs[i].f;
    s.t_colour = fb_circs[i].tColour;
    s.circ_title = fb_circs[i].title;
    s.stroke_colour = fb_circs[i].s;
    s.lastview = fb_circs[i].lastview;
    s.last_rotate = fb_circs[i].rotate;

    sets[s.id] = s;
    circs[s.id] = c;
    notifs[s.id] = n;
    lbls[s.id] = l;
    fts[s.id] = f;
    titles[s.id] = fb_circs[i].title;

    s.click(function(){ 
        if (editingCirc == 1){
            if (this.title != selected_circ){
                return false;
            }
        }
        selected_circ = this.title;         
        curr_type='1';
    });

    s.mousedown(function(){ 
        if (editingCirc == 1){
            if (this.title != selected_circ){
                return false;
            }
        }
        selected_circ = this.title;
        curr_type='1';
        sets[selected_circ].forEach(function (el){ el.node.ownerSVGElement.appendChild(el.node); }); 
    });

    s.hover( 
        function(){ 
            /* over */
            if (editingCirc == 1){
                if (this.title != selected_circ){
                    return false;
                }
            }
            curr_type='1';
            selected_circ = this.title;
            $('.popup_title').text(titles[this.title]);
            if (this.type!='text'){
                showPopup(this.getBBox());
            }
        }, 
        function(){ 
            /* out */
            //$('#tTip').fadeOut();
        }
    );

    s.drag( 
        function(){ 
            /* object moving */ 
            if (editingCirc == 1){
                if (this.title != selected_circ){
                    return false;
                }
            }
            showPopup( this.getBBox() ); 
        }, 
        function(){ 
            /* start drag */ 
        }, 
        function(){ 
            /* end drag */ 
        } 
    );
}
4

0 回答 0