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

试图用Raphael绘制圆圈，在非动态时工作，在动态时不起作用

1 个答案: