JS显示与圆相切的文本

时间:2016-03-02 14:21:14

标签: javascript css text transform geometry

这是我到目前为止所拥有的 https://jsfiddle.net/0p7zf13x/5/

这是我想要获得的 Text around circle, and tangent to its center

代码在jsfiddle上,但这里有一小部分。

    var count = $("#rollo ul li").length;
var cx = 300;
var cy = 300;
var r = 300;

$("#rollo ul li").each(function(index) {
    var theta = 2 * Math.PI * (index / count);
    var left = cx + r * Math.sin(theta);
    var top = cy - r * Math.cos(theta);
    console.log(index, left, top);
    $(this).css({ left: left, top: top });

        $(this).css({"transform":"rotate("+Math.cos(theta)*-90+"deg)"});
});

我从这个代码页开始 placing divs in a circle

问题:如何围绕第一个字母的圆圈和左侧制作文本,与同一个圆圈相切?所有文本均匀分布。

由于

1 个答案:

答案 0 :(得分:1)

只需使用您生成的角度:

$(this).css({"transform":"rotate("+(theta-Math.PI/2)+"rad)"});

fiddle