Question

如下所示，我试图绘制数字圈，但我希望这个圈子始终从0开始，我怎样才能实现这种行为。

另外我想将内圈边界的数字用虚线连接到数字，我怎么画虚线

http://jsfiddle.net/ineffablep/x03f61db/

function createFields() {
    $('.field').remove();
    var container = $('#container');
    for(var i = 0; i < +$('input:text').val()+1; i++) {
        $('<div/>', {
            'class': 'field',
            'text': i 
        }).appendTo(container);
    }
}

function distributeFields() {


    var fields = $('.field'), container = $('#container'),
        width = center.width()*2, height = center.height()*2,
        angle = 0, step = (2*Math.PI) / fields.length;
    var radius = width/2;
    var containerLength=$('input:text').val();
    angle=step* (containerLength-1);

    fields.each(function() {

        var x = Math.round(width + radius * Math.cos(angle));
        var y = Math.round(height + radius * Math.sin(angle));
            $(this).css({
            right: x + 'px',
            top: y + 'px'
        });
        angle -= step;

    });
}
 var center = $('#center');

$(window).resize(function(height) {

    $('#container').width($(window).height()*0.9)
    $('#container').height($(window).height()*0.9)
    var width = $('#container').width() * 0.4;
     console.log("width",$('#container').width());
    console.log("height",$('#container').height());
    var radius = width/2;
    width += 'px';
    radius += 'px';
    center.css({
        width: width, height: width,
        '-moz-border-radius' : radius,
        '-webkit-border-radius' : radius,
        'border-radius' : radius
    });

createFields();
distributeFields();
    // rest of your code for font-size setting etc..
});

$(window).resize();


$('input').change(function() {
    createFields();
    distributeFields();
});

Answer 1

必须更改初始角度。

angle = -90*Math.PI/180; // (deg) * [Math.PI/180 == rad to deg]
//We have to provide values in radians, so we convert our degrees to radians

check this link

围绕圆圈绘制几个数字

1 个答案: