-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
71 lines (53 loc) · 1.96 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
// // source: https://github.com/sudhanshuRathore/circular-text/blob/master/script.js
// const degreeToRadian = angle => {
// return angle * (Math.PI / 180);
// }
// const pointOnCircle = (radius, angle = 0) => {
// const xPos = radius * Math.cos(degreeToRadian(angle));
// const yPos = radius * Math.sin(degreeToRadian(angle));
// return {
// x: xPos,
// y: yPos
// }
// }
// const radius = 50;
// const diameter = radius * 2;
// const circle = document.querySelector('#circular-text');
// circle.style.width = `${diameter}px`;
// circle.style.height = `${diameter}px`;
// const text = circle.innerText;
// const characters = text.split('');
// circle.innerText = null;
// const startAngle = -90;
// const endAngle = 270;
// const angleRange = endAngle - startAngle;
// const deltaAngle = angleRange / characters.length;
// let currentAngle = startAngle;
// characters.forEach((char, index) => {
// const charElement = document.createElement('span');
// charElement.innerText = char;
// circle.appendChild(charElement);
// let { x: xPos, y: yPos } = pointOnCircle(radius, currentAngle);
// /**
// * Move center of drawn circle to
// * match parents center.
// */
// xPos += radius;
// yPos += radius;
// const translate = `translate(${xPos}px, ${yPos}px)`;
// const rotate = `rotate(${index * deltaAngle}deg)`;
// charElement.style.transform = `${translate} ${rotate}`;
// currentAngle += deltaAngle;
// });
function circularText(txt, radius, classIndex) {
txt = txt.split(""),
classIndex = document.getElementsByClassName("circTxt")[classIndex];
var deg = 360 / txt.length,
origin = 0;
txt.forEach((ea) => {
ea = `<p style='height:${radius}px;position:absolute;transform:rotate(${origin}deg);transform-origin:0 100%'>${ea}</p>`;
classIndex.innerHTML += ea;
origin += deg;
});
}
circularText("this text is in a circle ", 100, 0);