0
我一直在編寫一個人體應用程序，該應用程序從患者那裏獲取有關哪些部分傷害了他/她作爲醫學測試的一部分的輸入，爲此，我使用raphaeljs矢量圖庫。Raphaeljs圖形不是在多個引導標籤中呈現
我必須表明兩種引導選項卡，一個與他們的圈子佔位符的每個選項卡兩把萬能的圖像，使用戶可以在他們單擊以選中疼痛或腫脹的地方。
- 通過添加一個PNG骨幹圖像作爲我的第一個自舉選項卡的內容獲得標籤1疼痛的區域，我開始。
- 我畫了黃色圓圈，成爲疼痛和腫脹部位的佔位符。
- 我必須做相同的標籤2，這次我必須顯示相同的骨架PNG，但具有不同的名稱，例如我複製相同的代碼爲標籤1爲PNG圖像和佔位符以及。
問題是，黃色圓圈沒有在第二個標籤中顯示（腫脹或'Inflamación'），而是他們在第一個（疼痛或'Dolor'）中做的，我意識到這一點，因爲在第一個選項卡的圓圈重疊，如下圖所示。
通過我所看到的，拉斐爾LIB不能把隱藏部分的第二個選項卡圈COORDS，而不是這些COORDS被放在第一個標籤。這就是我得到這種行爲的原因。
任何想法？提前致謝。 這是我的代碼..
var style= {id: 'skeleton'+1, opacity: '0.65', fill: '#FEEA3E', 'stroke-width': '0','stroke-opacity': '1'};
var skel = Raphael("skeleton", 150, 352);
skel.image("<?php echo base_url() ?>assets/maps/skeleton.png", 0, 0, 150, 352);
/* ======PAIN=========
Draw skeleton for pain*/
// Skeleton script
var shapes= new Array();
var circles_body = new Array({xc: 27.5, yc: 76, r: 10}, {xc: 100.5, yc: 76, r: 10}, {xc: 12, yc: 132, r: 10}, {xc: 110, yc: 132, r: 10}, {xc: 10.5, yc: 178, r: 10}, {xc: 125, yc: 175.5, r: 10}, {xc: 51, yc: 253, r: 10}, {xc: 72, yc: 253, r: 9});
for (var i = 0; i < circles_body.length; i++) {
shapes[i]= skel.circle(circles_body[i].xc, circles_body[i].yc, circles_body[i].r);
shapes[i].attr(style);
shapes[i].id= "skeleton"+i;
shapes[i].click(function(){
if(this.attr('fill')== "#990000"){
pj--;
this.animate({fill: "#FEEA3E"}, 200);
}else{
pj++;
this.animate({fill: "#990000"}, 200);
}
});
};
/* ====== SWELLING =========
Draw skeleton for swelling*/
// Skeleton script
var shapes= new Array();
var circles_body_i = new Array({xc: 27.5, yc: 76, r: 10}, {xc: 100.5, yc: 76, r: 10}, {xc: 12, yc: 132, r: 10}, {xc: 110, yc: 132, r: 10}, {xc: 10.5, yc: 178, r: 10}, {xc: 125, yc: 175.5, r: 10}, {xc: 51, yc: 253, r: 10}, {xc: 72, yc: 253, r: 9});
for (var i = 0; i < circles_body_i.length; i++) {
shapes[i]= skel.circle(circles_body_i[i].xc, circles_body_i[i].yc, circles_body_i[i].r);
shapes[i].attr(style);
shapes[i].id= "skeleton_i"+i;
shapes[i].click(function(){
if(this.attr('fill')== "#990000"){
pj--;
this.animate({fill: "#FEEA3E"}, 200);
}else{
pj++;
this.animate({fill: "#990000"}, 200);
}
});
};<section role="tabpanel">
<ul id="examTab" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#dolor" id="dolor-tab" role="tab" data-toggle="tab" aria-controls="dolor" aria-expanded="true">Dolor</a></li>
<li role="presentation"><a href="#infl" role="tab" id="infl-tab" data-toggle="tab" aria-controls="infl" aria-expanded="false">Inflamación</a></li>
..
</section>
\t <article role="tabpanel" class="tab-pane fade active in" id="dolor" aria-labelledby="dolor-tab">
<h3>1) Dolor</h3>
<h4 class="break-one">Seleccione dónde está el dolor</h4>
<figure class="break-two">
<article id="skeleton"></article>
<figcaption><em>Cuerpo en general</em></figcaption>
</figure>
</article>
\t ..
\t <article role="tabpanel" class="tab-pane fade" id="infl" aria-labelledby="infl-tab">
<h3>2) Inflamación</h3>
<h4 class="break-one">Seleccione dónde las inflamaciones</h4 class="break-one">
<figure class="break-two">
<article id="skeleton_inf_i"></article>
<figcaption><em>Cuerpo en general</em></figcaption>
</figure>
</article>