Raphael을 사용하여 원을 그리는 중입니다. 동적 일 때 작동하지 않습니다. 동적 일 때 작동하지 않습니다.

Question

몇 가지 계산을 td 위로 수행 한 후 원을 그리려합니다.

$('#priority_one').width($('#learning_streams').width()); 
$('#priority_one').height($('#learning_streams').height()); 
var priority_one_paper = new Raphael('priority_one', $('#priority_one').width(), $('#priority_one').height()); 
var priority_one_circle = priority_one_paper.circle((pos.left).toFixed(0), (pos.top).toFixed(0), (width/2).toFixed(0)); 
priority_one_circle.attr('stroke','#000000'); 

을하지만 그것은 동적으로 만들려고 할 때 더 이상 작동합니다 (TD 변경은 사용자가 입력에 따라 없음) : 나는 다음과 같은 코드를 실행하면 작동합니다. 코드 :

function circlePriorityOne() { 
    //priority_one is a div absolutely positioned over a table called learning_streams 
    //sets size of priority_one based off the table learning_streams 
    $('#priority_one').width($('#learning_streams').width()); 
    $('#priority_one').height($('#learning_streams').height()); 


    //creates the 'paper' to draw the circle on 
    var priority_one_paper = new Raphael('priority_one', $('#priority_one').width(), $('#priority_one').height()); 

    var main = getMax(priority_one_count); //returns the id of the td to circle 
    var pos = $('#'+main).position(); 
    var width = $('#'+main).width(); 

    //using toFixed() to get rid of decimals 
    var priority_one_circle = priority_one_paper.circle((pos.left).toFixed(0), (pos.top).toFixed(0), (width/2).toFixed(0)); 
    priority_one_circle.attr('stroke','#000000'); 
} 

이 항목을 참조하십시오. 감사.

Answer 1

네 말이 맞아. .position()은 부모 요소를 기준으로 현재 위치를 가져옵니다. 현재 위치를 얻는 대신 .offset()를 사용해야합니다

의 document

편집
내가 테스트하지 않았기 때문에 나는 그것을 아주 잘 모르겠어요하지만 당신이 원하는 일을해야한다^^

var td = $("#td"), 
    pos_td = td.offset(), 
    table = td.parents("table"), 
    pos_table = table.offset(); 

// td's position relative to table 
console.log("left: " + (pos_td.left - pos_table.left)); 
console.log("top: " + (pos_td.top - pos_td.top));