英文:
How to rotate big circle child circle to that it faces towards the center point of parent circle that is origin (0, 0) in js and math
问题
我有一个大圆，周围有小圆作为它的子元素，现在我遇到的问题是它们的角度旋转。我想要旋转子圆，使它们的90度方向指向它们的父圆的中心点（0, 0）。如果给出每个子圆的x、y坐标，该如何实现呢？
以下是您提供的代码片段，已翻译好：
<React.Fragment>
<>
{(circles || []).map((circle, idx) => {
const pathRadius = circle.childrenRadius;
const pathD = `
M ${-20},${pathRadius + 5}
C ${-pathRadius - 50} ${-pathRadius - 28}, ${pathRadius + 50}
${-pathRadius - 28}, ${20} ${pathRadius + 5}`;
return (
<g
onClick={() =>
setActiveTable({ data: circle, index: idx, type: "round" })
}
key={circle.id}
className={`table round-table table-${idx}`}
id={idx}
transform="translate(200, 200)"
>
<g className={`round-table-inner table-inner-${idx}`}>
<circle
id={idx}
className={`circle circle-${idx}`}
r={circle.radius}
></circle>
<TableTitle
className={`svg-text round-title-${idx}`}
idx={idx}
title={circle.title}
degrees={-90}
/>
<ScalePointer
className={"arrow"}
idx={idx}
y={-circle.radius}
x={0}
/>
<RotationPointer
className={`rotate-pointer pointer-${idx}`}
idx={idx}
y={0}
x={circle.radius}
/>
{circle.children.map((childrenCircle, index) => {
const numChildren = circle.children.length;
const x = (circle.radius + 45) * Math.cos(angle);
const y = (circle.radius + 45) * Math.sin(angle);
// const personName = "Nathan Drake is the name"; //limit 36
// Calculate the path for the circular text
const pathId = `path-${idx}-${index}`;
const theta = Math.atan2(0 - y, 0 - x);
const dx = x - 0;
const dy = y - 0;
//Person Name alignment
if (x < 0) {
angle = 270 - (Math.atan(y / -x) * 180) / Math.PI;
} else {
angle = 90 + (Math.atan(y / x) * 180) / Math.PI;
}
return (
<ChildCircle
handleChild={handleChild}
x={x}
y={-y}
index={index}
idx={idx}
degrees={angle}
childrenRadius={circle.childrenRadius}
pathD={pathD}
pathId={pathId}
personName={childrenCircle.title}
/>
);
})}
</g>
</g>
);
})}
</>
</React.Fragment>
这是当前角度计算的结果：
英文:
I have one big circle and I have small circles around it as its children now I am facing an issue is their angle rotation I want to rotate the children's circles so that their 90 degrees is towards the center of their parent circle which is (0, 0). how to do that if given the x, y of each child circle.
<>
{(circles || []).map((circle, idx) => {
const pathRadius = circle.childrenRadius;
const pathD = `
M ${-20},${pathRadius + 5}
C ${-pathRadius - 50} ${-pathRadius - 28}, ${pathRadius + 50}
${-pathRadius - 28}, ${20} ${pathRadius + 5}`;
return (
<g
onClick={() =>
setActiveTable({ data: circle, index: idx, type: "round" })
}
key={circle.id}
className={`table round-table table-${idx}`}
id={idx}
transform="translate(200, 200)"
>
<g className={`round-table-inner table-inner-${idx}`}>
<circle
id={idx}
className={`circle circle-${idx}`}
r={circle.radius}
></circle>
<TableTitle
className={`svg-text round-title-${idx}`}
idx={idx}
title={circle.title}
degrees={-90}
/>
<ScalePointer
className={"arrow"}
idx={idx}
y={-circle.radius}
x={0}
/>
<RotationPointer
className={`rotate-pointer pointer-${idx}`}
idx={idx}
y={0}
x={circle.radius}
/>
{circle.children.map((childrenCircle, index) => {
const numChildren = circle.children.length;
const x = (circle.radius + 45) * Math.cos(angle);
const y = (circle.radius + 45) * Math.sin(angle);
// const personName = "Nathan Drake is the name"; //limit 36
// Calculate the path for the circular text
const pathId = `path-${idx}-${index}`;
const theta = Math.atan2(0 - y, 0 - x);
const dx = x - 0;
const dy = y - 0;
//Person Name alignment
if (x < 0) {
angle = 270 - (Math.atan(y / -x) * 180) / Math.PI;
} else {
angle = 90 + (Math.atan(y / x) * 180) / Math.PI;
}
return (
<ChildCircle
handleChild={handleChild}
x={x}
y={-y}
index={index}
idx={idx}
degrees={angle}
childrenRadius={circle.childrenRadius}
pathD={pathD}
pathId={pathId}
personName={childrenCircle.title}
/>
);
})}
</g>
</g>
);
})}
</>
</React.Fragment>
And this is the result of the current angle calcuation.
答案1
得分: 0
希望我使用这个人的答案解决了它，并且我也给了他一个赞。
如果稍微修改一下。
if (x < 0) {
angle = 270 - (Math.atan(y / x) * 180) / Math.PI;
} else {
angle = 90 + (Math.atan(y / -x) * 180) / Math.PI;
}
英文:
Hopefully, I solved it using this person's answer and I also give him an upvote.
and if modify it a little bit.
if (x < 0) {
angle = 270 - (Math.atan(y / x) * 180) / Math.PI;
} else {
angle = 90 + (Math.atan(y / -x) * 180) / Math.PI;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论