🔵
【CSS, JS】円や四角形の辺上にテキストを配置する
概要
CSS, JavaScriptを使用して、円や四角形の辺上にテキストを配置します。
円上にテキストを配置
JS側でfor文を使ってテキストを一文字ごとに生成し、テキストの文字数を参考にテキスト配置の間隔・角度を、DOMのwidthを参考に中心点や位置、角度を計算して入れています。
四角形上にテキストを配置
四角形のDOMのwidthとheightを参考に、周の長さやテキストを配置する間隔、一辺に配置する文字数などを計算し、テキストを一文字ごとに生成して、位置・傾きをつけています。
ちなみにfontSize / 2
を足したり引いたりしているのは、4隅で文字が重なってしまう部分があったため、一辺の位置を広めに調整している記述です。お好みで書き換えてください。
if (i < textPerWidth) {
x = i * (widthLength / textPerWidth);
y = -fontSize / 2; // @@@
rotate = 0;
} else if (i < textPerWidth + textPerHeight) {
x = widthLength + fontSize / 2; // @@@
y = (i - textPerWidth) * (heigthLength / textPerHeight);
rotate = 90;
...
Discussion