英文:
How to place image inside of several nested border line randomly
问题
I am trying to place image inside nested borders line randomly.
Please help me! Thanks in advance
How to place images in random position like above picture.
My code below:
- HTML: I don't care if the structure changes it just needs to work.
- CSS: Please note this is just 1 method I have tried I have been sitting here for about 2 hours messing with this and couldn't figure it out.
<div class="first">
<img src="https://images.unsplash.com/photo-1683265379492-8179a1fff9c3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3498&q=80" class="img" />
<div class="second">
<img src="https://images.unsplash.com/photo-1683265379492-8179a1fff9c3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3498&q=80" class="imgSecond" />
<div class="third">
<img src="https://images.unsplash.com/photo-1683265379492-8179a1fff9c3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3498&q=80" class="imgThird" />
<div class="forth">
<img src="https://images.unsplash.com/photo-1683265379492-8179a1fff9c3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3498&q=80" class="imgForth" />
<div class="fifth"></div>
</div>
</div>
</div>
</div>
CSS:
.first {
border: 2px solid #D9DFE7;
width: 385px;
height: 385px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin-top: 40px;
margin-left: 40px;
}
.img {
width: 35px;
height: 35px;
border-radius: 50%;
position: absolute;
top: -1.1rem;
}
.second {
border: 2px solid #D9DFE7;
width: 301px;
height: 301px;
border-radius: 50%;
margin: 2.5%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.imgSecond {
width: 35px;
height: 35px;
border-radius: 50%;
position: absolute;
top: -1.1rem;
}
.third {
border: 2px solid #D9DFE7;
height: 215px;
width: 215px;
border-radius: 50%;
margin: 15%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.imgThird {
width: 35px;
height: 35px;
border-radius: 50%;
position: absolute;
top: -1.1rem;
}
.forth {
border: 2px solid #D9DFE7;
height: 133px;
width: 133px;
border-radius: 50%;
margin: 2.5%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.imgForth {
width: 35px;
height: 35px;
border-radius: 50%;
position: absolute;
top: -1.1rem;
}
.fifth {
width: 49px;
height: 49px;
border: 2px solid #D9DFE7;
border-radius: 50%;
margin: 2.5%;
}
<details>
<summary>英文:</summary>
I am trying to place image inside nested borders line randomly.
Please help me! Thanks in advance
[![Expected result][1]][1]
How to place images in random position like above picture.
My code below:
- HTML: I don't care if the structure changes it just needs to work.
- CSS: Please note this is just 1 method I have tried I have been sitting here for about 2 hours messing with this and couldn't figure it out.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.first {
border: 2px solid #D9DFE7;
width: 385px;
height: 385px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin-top: 40px;
margin-left: 40px;
}
.img {
width: 35px;
height: 35px;
border-radius: 50%;
position: absolute;
top: -1.1rem;
}
.second {
border: 2px solid #D9DFE7;
width: 301px;
height: 301px;
border-radius: 50%;
margin: 2.5%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.imgSecond {
width: 35px;
height: 35px;
border-radius: 50%;
position: absolute;
top: -1.1rem;
}
.third {
border: 2px solid #D9DFE7;
height: 215px;
width: 215px;
border-radius: 50%;
margin: 15%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.imgThird {
width: 35px;
height: 35px;
border-radius: 50%;
position: absolute;
top: -1.1rem;
}
.forth {
border: 2px solid #D9DFE7;
height: 133px;
width: 133px;
border-radius: 50%;
margin: 2.5%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.imgForth {
width: 35px;
height: 35px;
border-radius: 50%;
position: absolute;
top: -1.1rem;
}
.fifth {
width: 49px;
height: 49px;
border: 2px solid #D9DFE7;
border-radius: 50%;
margin: 2.5%;
}
<!-- language: lang-html -->
<div class="first">
<img src="https://images.unsplash.com/photo-1683265379492-8179a1fff9c3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3498&q=80" class="img" />
<div class="second">
<img src="https://images.unsplash.com/photo-1683265379492-8179a1fff9c3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3498&q=80" class="imgSecond" />
<div class="third">
<img src="https://images.unsplash.com/photo-1683265379492-8179a1fff9c3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3498&q=80" class="imgThird" />
<div class="forth">
<img src="https://images.unsplash.com/photo-1683265379492-8179a1fff9c3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3498&q=80" class="imgForth" />
<div class="fifth"></div>
</div>
</div>
</div>
</div>
<!-- end snippet -->
[1]: https://i.stack.imgur.com/zXTGb.png
</details>
# 答案1
**得分**: 1
以下是您要翻译的内容：
要在圆上随机放置它们，您需要知道圆的半径。
然后，您可以使用 `Math.random()` 从 0° 到 360° 随机选择一个角度，然后使用以下公式来放置您的图像。
```javascript
y = radius * sin(angle)
x = radius * cos(angle)
x 和 y 是您需要将图像放置在圆上的 x 和 y 坐标。
以下是一个使用 JavaScript 画布演示数学原理的示例。您可以多次执行片段以查看确实创建了随机点。
重要的是要知道在画布中，左上角的坐标是 (0, 0)，这解释了绝对值的计算。此外，您需要知道 sin(90°) = 1，sin(270°) = -1，cos(0°) = 1 和 cos(180°) = -1 来理解这些计算。
const canvas = document.getElementById("canvas");
const context = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 45;
function drawCircle(context, centerX, centerY, radius, lineWidth = 1){
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = lineWidth;
context.strokeStyle = '#000';
context.stroke();
}
drawCircle(context, centerX, centerY, radius);
function randomAngle() {
return Math.random() * 360;
}
function randomPointOnCircle(centerX, centerY, radius){
const angle = randomAngle();
const xRelativeCenter = radius * Math.sin(angle);
const yRelativeCenter = radius * Math.cos(angle);
const xAbsolute = centerX + xRelativeCenter;
const yAbsolute = centerY - yRelativeCenter;
return { x: xAbsolute, y: yAbsolute };
}
function drawRandomPointOnCircle(context, centerX, centerY, radius){
const point = randomPointOnCircle(centerX, centerY, radius);
console.log(`x = ${point.x}, y = ${point.y}`)
drawCircle(context, point.x, point.y, 1, 2);
}
drawRandomPointOnCircle(context, centerX, centerY, radius);
如果您想在 CSS 中执行此操作：
CSS 具有 sin() 和 cos() 函数，但是没有 random() 函数（据我所知），因此您可能需要使用 Math.random() 生成随机数。
英文:
To place them randomly on a circle you need to know the radius of the circle.
Then you can use Math.random() to randomly choose an angle obviously from 0° to 360° and the use the following formulas to place your images.
y = radius * sin(angle)
x = radius * cos(angle)
x and y and the x and y coordinates you need to place your images at which will be on the circle.
Here an example using JavaScript canvas showing how the maths works. You can execute the snippet multiple times to see that indeed random points are being created.
It is important to know that in a canvas the top-left corner has the coordinates (0, 0) which explains the calculation of the absolute values. Also you would need to know that sin(90°) = 1, sin(270°) = -1, cos(0°) = 1 and cos(180°) = -1 to make sense of the calculations.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const canvas = document.getElementById("canvas");
const context = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 45;
function drawCircle(context, centerX, centerY, radius, lineWidth = 1){
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = lineWidth;
context.strokeStyle = '#000';
context.stroke();
}
drawCircle(context, centerX, centerY, radius);
function randomAngle() {
return Math.random() * 360;
}
function randomPointOnCircle(centerX, centerY, radius){
const angle = randomAngle();
const xRelativeCenter = radius * Math.sin(angle);
const yRelativeCenter = radius * Math.cos(angle);
const xAbsolute = centerX + xRelativeCenter;
const yAbsolute = centerY - yRelativeCenter;
return { x: xAbsolute, y: yAbsolute };
}
function drawRandomPointOnCircle(context, centerX, centerY, radius){
const point = randomPointOnCircle(centerX, centerY, radius);
console.log(`x = ${point.x}, y = ${point.y}`)
drawCircle(context, point.x, point.y, 1, 2);
}
drawRandomPointOnCircle(context, centerX, centerY, radius);
<!-- language: lang-html -->
<canvas id="canvas" height="100px" width="100px" />
<!-- end snippet -->
If you want to do it in CSS:
CSS has sin() and cos() functions, however without some pre-processor there is no random() function (as far as I know) so you would probably have to use Math.random() to generate the random numbers.
答案2
得分: 1
我们可以将图像的位置定义为类似于极坐标：通过从中心点旋转和偏移。
偏移会将图像放置在环上。在此之前的旋转将它们放置在环上。
通过随机旋转，我们可以随机地将图像放置在它们的环上。
const rings = document.querySelectorAll(".ring");
rings.forEach(ring => {
const randomDegree = Math.random() * 360;
ring.style.setProperty("--rotation", `${randomDegree}deg`);
});
#rings {
padding: 16px;
display: grid;
place-items: center;
}
.ring {
--size:;
--rotation:;
position: relative;
grid-area: 1/1;
border: 2px solid #d9dfe7;
border-radius: 100%;
aspect-ratio: 1/1;
height: var(--size, auto);
}
.ring img {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid blue;
border-radius: 100%;
aspect-ratio: 1/1;
height: 35px;
transform:
translate(-50%, -50%) /*将图像居中于圆圈*/
rotate(var(--rotation, 0deg)) /*相对于`--rotation`围绕中心旋转*/
translateY(calc(var(--size, auto) * -0.5)) /*沿着旋转轴将图像偏移到圆圈上*/
rotate(calc(-1 * var(--rotation, 0deg))); /*反向旋转以使图像保持直立*/
}
<div id="rings">
<div class="ring" style="--size:385px">
<img src="https://images.unsplash.com/photo-1683265379492-8179a1fff9c3">
</div>
<div class="ring" style="--size:301px">
<img src="https://images.unsplash.com/photo-1683265379492-8179a1fff9c3">
</div>
<div class="ring" style="--size:215px">
<img src="https://images.unsplash.com/photo-1683265379492-8179a1fff9c3">
</div>
<div class="ring" style="--size:133px">
<img src="https://images.unsplash.com/photo-1683265379492-8179a1fff9c3">
</div>
<div class="ring" style="--size:49px">
<img src="https://images.unsplash.com/photo-1683265379492-8179a1fff9c3">
</div>
</div>
注意：
-
对于直立的图像，请确保在放置后进行反向旋转。
-
对于在其线上居中的图像，请确保相应地进行平移（按其大小的一半）。
英文:
We can define the images' positions similar to polar coordinates: By rotating and offsetting from the center point.
The offset places the images onto the rings. The rotation beforehand will place them along the rings.
By randomizing the rotation, we randomly place the images along their rings.
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
const rings = document.querySelectorAll(".ring");
rings.forEach(ring => {
const randomDegree = Math.random() * 360;
ring.style.setProperty("--rotation", `${randomDegree}deg`);
});
<!-- language: lang-css -->
#rings {
padding: 16px;
display: grid;
place-items: center;
}
.ring {
--size:;
--rotation:;
position: relative;
grid-area: 1/1;
border: 2px solid #d9dfe7;
border-radius: 100%;
aspect-ratio: 1/1;
height: var(--size, auto);
}
.ring img {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid blue;
border-radius: 100%;
aspect-ratio: 1/1;
height: 35px;
transform:
translate(-50%, -50%) /*Center image on circle*/
rotate(var(--rotation, 0deg)) /*Rotate around center relative to `--rotation`*/
translateY(calc(var(--size, auto) * -0.5)) /*Offset onto circle along rotation*/
rotate(calc(-1 * var(--rotation, 0deg))); /*Counter-rotate to have image upright*/
}
<!-- language: lang-html -->
<div id="rings">
<div class="ring" style="--size:385px">
<img src="https://images.unsplash.com/photo-1683265379492-8179a1fff9c3">
</div>
<div class="ring" style="--size:301px">
<img src="https://images.unsplash.com/photo-1683265379492-8179a1fff9c3">
</div>
<div class="ring" style="--size:215px">
<img src="https://images.unsplash.com/photo-1683265379492-8179a1fff9c3">
</div>
<div class="ring" style="--size:133px">
<img src="https://images.unsplash.com/photo-1683265379492-8179a1fff9c3">
</div>
<div class="ring" style="--size:49px">
<img src="https://images.unsplash.com/photo-1683265379492-8179a1fff9c3">
</div>
</div>
<!-- end snippet -->
Note:
-
For an upright image, make sure to counter-rotate it after placement.
-
For an image centered on its line, make sure to translate it accordingly (by half its size).
答案3
得分: 1
import { useEffect } from "react"
import styles from "./user-scan-modal.styles.module.css"
type RingStyles = {
"--rotation"?: string
"--size"?: string
} & React.CSSProperties
export const UserScanModal = memoComponent("UserScanModal", () => {
const numRings = 5 // Change this to the number of rings you want to display
const rings = []
for (let i = 0; i < numRings; i++) {
const randomDegree = Math.random() * 360
const ringStyles: RingStyles = {
"--rotation": `${randomDegree}deg`,
"--size": `${385 - i * 82}px`,
}
rings.push(
<div key={i} className={styles.ring} style={ringStyles}>
<img
src="https://images.unsplash.com/photo-1683265379492-8179a1fff9c3"
alt=""
/>
</div>,
)
}
// ---------------------------------------------------------------------------
return <div className={styles["rings-container"]}>{rings}</div>
})
.rings-container {
padding: 16px;
display: grid;
place-items: center;
}
.ring {
--size: ;
--rotation: ;
position: relative;
grid-area: 1/1;
border: 2px solid #D9DFE7;
border-radius: 100%;
aspect-ratio: 1/1;
height: var(--size, auto);
}
.ring img {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid blue;
border-radius: 50%;
aspect-ratio: 1/1;
height: 35px;
transform: translate(-50%, -50%) rotate(var(--rotation, 0deg))
translateY(calc(var(--size, auto) * -0.5))
rotate(calc(-1 * var(--rotation, 0deg)));
}
英文:
I solved your problems in React typescript. I got code of Mushroomator and modified it.
import { useEffect } from "react"
import styles from "./user-scan-modal.styles.module.css"
type RingStyles = {
"--rotation"?: string
"--size"?: string
} & React.CSSProperties
export const UserScanModal = memoComponent("UserScanModal", () => {
const numRings = 5 // Change this to the number of rings you want to display
const rings = []
for (let i = 0; i < numRings; i++) {
const randomDegree = Math.random() * 360
const ringStyles: RingStyles = {
"--rotation": `${randomDegree}deg`,
"--size": `${385 - i * 82}px`,
}
rings.push(
<div key={i} className={styles.ring} style={ringStyles}>
<img
src="https://images.unsplash.com/photo-1683265379492-8179a1fff9c3"
alt=""
/>
</div>,
)
}
// ---------------------------------------------------------------------------
return <div className={styles["rings-container"]}>{rings}</div>
})
and css module here:
.rings-container {
padding: 16px;
display: grid;
place-items: center;
}
.ring {
--size: ;
--rotation: ;
position: relative;
grid-area: 1/1;
border: 2px solid #D9DFE7;
border-radius: 100%;
aspect-ratio: 1/1;
height: var(--size, auto);
}
.ring img {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid blue;
border-radius: 50%;
aspect-ratio: 1/1;
height: 35px;
transform: translate(-50%, -50%) rotate(var(--rotation, 0deg))
translateY(calc(var(--size, auto) * -0.5))
rotate(calc(-1 * var(--rotation, 0deg)));
}
I hope this solved your problem!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论