こんにちは私は現在、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 */
}
);
}