jQuery connect with lines

Question

How can I connect numbers with dotted lines in the below jsfiddle.

I want these lines to start from border of inner circle, either from jQuery or from css. I mean around border of inner circle start from inner border edge to number , ....... 1, ..... 2 to show guide lines.

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

enter image description here

I mean around border start from border edge to number , ....... 1, ..... 2 to show guide lines — Pangaluri S, Apr 29 '15 at 07:11
@Pangaluri S : I will suggest one direction to get that which i found when i googled. please check this, hope you will find the way: http://stackoverflow.com/questions/11299944/how-to-draw-a-line-using-jquery-and-html5-canvas ; http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas ; http://www.rgraph.net/blog/2013/january/html5-canvas-dashed-lines.html#introduction — kiran, Apr 29 '15 at 08:07

score 0 · Answer 1 · answered Apr 29 '15 at 20:18

0

I have achieved this with Canvas

context.fillStyle = '#00867F';
  context.fill();
  context.lineWidth = 1;
  context.strokeStyle = '#F0EBF1';
  context.stroke();

    context.setLineDash([1,2]);
    context.moveTo(lx, ly);
    context.lineTo(nx, ny);

answered Apr 29 '15 at 20:18

Pangaluri S

83
1
2
8

jQuery connect with lines

1 Answers1