在圆周上画出若干个数字。

Question

根据以下fiddle，我试图绘制数字圆圈，但我希望这个圆圈始终从顶部以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();
});

- Pangaluri S

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

点击这个链接查看

- Vinod Kumar

---

嗨，谢谢。这就是我需要的内容。我应该如何绘制虚线以连接内圆边缘上每个数字？ - Pangaluri S

实际上，我建议您使用画布元素来完成您的任务...您甚至可以将内部圆与数字连接起来...如果您愿意使用画布，我很快就会发布一个jsFiddle。 - Vinod Kumar

嗨，Vinod，我很高兴使用Canvas或SVG，因为我不擅长SVG，所以使用了jQuery的Canvas。 - Pangaluri S