gpt4 book ai didi

javascript - jQuery 连接线

转载 作者:行者123 更新时间:2023-11-28 03:12:34 27 4
gpt4 key购买 nike

如何在下面的 jsfiddle 中用虚线连接数字。

我希望这些线从内圈的边界开始,无论是来自 jQuery 还是来自 css。我的意思是围绕内圈的边界从内边界边缘开始到数字 ....... 1, ..... 2 以显示引导线。

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

最佳答案

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

关于javascript - jQuery 连接线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29936355/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com