javascript - 以适当的 Angular 将div分布在一个圆圈中-6ren

javascript - 以适当的 Angular 将div分布在一个圆圈中

转载作者：行者123 更新时间：2023-11-29 18:57:39

26

4

我有一圈 div。它们是用 javascript 创建的，并均匀分布在圆圈周围。 div 的数量取决于我提供的一些数组。一个圆圈内可能有任意数量的 div。

这些 div 目前是水平的。

但是我想根据它们在圆圈中的位置以适当的 Angular 旋转每个。所以它看起来像这样:

不要介意第二张图的内容，应该是一样的:一、二、三等

有人可以帮我做这个吗？

所以这是我现在拥有的代码:

var content = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen'];


var container = document.getElementById("container");
var size = window.innerWidth > window.innerHeight ? window.innerHeight : window.innerWidth;
container.style.height = size + 'px';
container.style.width = size + 'px';

function createFields() {
    for(var i = 0; i < content.length; i++) {
		var div = document.createElement('div');
		div.className = "field";
		div.innerHTML = content[i];
		container.appendChild(div);
    }
}

function distributeFields() {
	var myNodeList = document.querySelectorAll('.field');
	var fields = Array.from(myNodeList);
	var width = size/2;
    var height = size/2;
    var angle = 0; 
	var step = 2 * Math.PI / fields.length;
    var radius = 0.7 * width;
    
    var angle = -90 * Math.PI / 180;
   
	fields.forEach(function(element) {
		var x = Math.round(width + radius * Math.cos(angle));
        var y = Math.round(height + radius * Math.sin(angle));
		element.style.right = x + 'px';
		element.style.top = y + 'px';
        angle =  angle - step;
	});
}

window.onload = function() {
	createFields();
	distributeFields();
};

html, body { height: 100%; margin: 0; border:0; }
#container { background-color: DarkSeaGreen; box-sizing: border-box; position: relative; margin: auto; overflow: hidden !important; }
.field { width: 60px; height: 20px; position: absolute; color: #fff; background-color:indigo;}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Circle</title>
</head>
<body>
<div id="container"></div>
</body>
</html>

最佳答案

您可以在 forEach 和 fields.length 中使用 index 来获得 360 度的分数，或一个完整的圆。

var rotationBase = -90;
var rotation = rotationBase + 360 / fields.length * index;
element.style.transform = 'rotate(' + rotation + 'deg)';

完整的工作示例

var content = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen'];


var container = document.getElementById("container");
var size = window.innerWidth > window.innerHeight ? window.innerHeight : window.innerWidth;
container.style.height = size + 'px';
container.style.width = size + 'px';

function createFields() {
    for (var i = 0; i < content.length; i++) {
        var div = document.createElement('div');
        div.className = "field";
        div.innerHTML = content[i];
        container.appendChild(div);
    }
}

function distributeFields() {
    var myNodeList = document.querySelectorAll('.field');
    var fields = Array.from(myNodeList);
    var width = size / 2;
    var height = size / 2;
    var angle = 0;
    var step = 2 * Math.PI / fields.length;
    var radius = 0.7 * width;

    var angle = -90 * Math.PI / 180;

    fields.forEach(function (element, index) {
        var x = Math.round(width + radius * Math.cos(angle));
        var y = Math.round(height + radius * Math.sin(angle));
        element.style.right = x + 'px';
        element.style.top = y + 'px';
        
        var rotationBase = -90;
        var rotation = rotationBase + 360 / fields.length * index;
        element.style.transform = 'rotate(' + rotation + 'deg)';
        
        angle = angle - step;
    });
}

window.onload = function () {
    createFields();
    distributeFields();
};

html, body { height: 100%; margin: 0; border:0; }
#container { background-color: DarkSeaGreen; box-sizing: border-box; position: relative; margin: auto; overflow: hidden !important; }
.field { width: 60px; height: 20px; position: absolute; color: #fff; background-color:indigo;}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Circle</title>
</head>
<body>
<div id="container"></div>
</body>
</html>

关于javascript - 以适当的 Angular 将div分布在一个圆圈中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48610101/

26

4

0

文章推荐： java - 从另一个可安装的应用程序启动即时应用程序

文章推荐： javascript - 通过数组属性重复数组对象元素

android - 指定的 Gradle 分布 'https://services.gradle.org/distributions/gradle-4.6-all.zip' 似乎不包含 Gradle 分布
我有两个项目。一个项目正在运行，没有任何问题。它是从 gitlab 下载的。另一个项目是从 github 下载的。 github项目有这个问题。我想使用默认的 gradle 分布。我想知道我做错了什么
Hadoop 分布
我正在通过我学习的大学提供的 VNC 软件(远程访问)使用 IBM bigInsights，但我无法通过该桌面访问 Internet。为了使用互联网上的一些数据样本，我决定安装 Hadoop 在我的笔
带条件列表的 Scala 分布
所以，这非常简单，我有一个包含嵌套列表的列表，如下所示: List( *list1* List(List("n1", "n3"), List("n1", "n4"), List("n3", "n4")
python - 列表和元组之间的连接/分布
我有以下示例。 prefix = ['blue ','brown '] suffix = [('dog','shoes','bike'), ('tree','cat','car')] 我想获得一个如下
MySQL 频率/分布
我创建了一项调查并将其发送出去。该调查要求用户提供电子邮件，然后要求他们从包含 8 个不同选项的下拉菜单中选择要吃哪顿饭。有些人使用同一封电子邮件多次填写调查，但食物选择不同。我有一个如下所示的 M
python - 无边界地 block 分布
我在 Python 中使用 plotly 来创建由某些分类变量着色的美国县的等值线。由于县非常小，因此图像中的边界线占主导地位。我怎样才能摆脱它们(或将它们的宽度设置为零)？到目前为止的代码和输出(
python - python中的 Gamma 分布
我们有qgamma在 R 和 gamm.inv在 excel 中，我无法使用 invgamma 获得相同的结果python中的函数。例如在excel中GAMMA.INV(0.99,35,0.08)=4
docker - Kubernetes Pod 分布
过去几年我经常使用 Docker，但对于 Kubernetes 来说我还是个新手。我从今天开始，与我以前使用 Docker swarm 的方式相比，我正在努力思考 Pod 概念的实用性。假设我有一个
ios - 具有动态标签宽度的堆栈 View 分布
我有一个 UIStackView然而，subViews的第一个 View 是 UILabel它没有相应地调整它的大小。我的代码如下； private let stackView: UIStackVi
r - 用自由度绘制学生的 t 分布
我想绘制自由度为 1、2、5 和 10 的 Student t 分布；所有在一个图中，并为图中的每个分布使用不同的颜色。此外，在 Canvas 的左上角创建一个图例，并增加 df = 1 的曲线线宽。
Python - 根据这些值拟合 GEV 分布
我对 Python 很陌生，我在互联网上浏览过，但找不到任何可以帮助我解决问题的逻辑。我在图中有降水值，现在我需要根据图中的这些值拟合 GEV 分布。每个值等于从 1974 年到 2017 年的一年
python - 对直方图中绘制的给定数据标准化威 bool 分布
我正在尝试复制此图 https://wind-data.ch/tools/weibull.php 我编写的代码是 import matplotlib.pyplot as plt import nump
python - 如何计算文本中词频的最佳 zipf 分布
对于家庭作业，我必须绘制文本的词频并将其与最佳 zipf 分布进行比较。根据对数对数图中的排名绘制文本的词频计数似乎效果很好。但是我在计算最佳 zipf 分布时遇到了麻烦。结果应该如下所示: 我不
r - R中的广义逆 Gamma 分布
Mathematica 具有四参数广义逆 Gamma 分布: http://reference.wolfram.com/mathematica/ref/InverseGammaDistribution
c - Pthreads数组 block 分布
正在用 C 语言开发一个学校项目，使用 Pthreads 将一维数组分解为 tRows 和 tCols 的子矩阵。整个数组的大小为 wRows 和 wCols。假设 wCols = 4、wRows =
c++ - 统一的 int32 分布
有没有办法得到制服int32_t没有警告的分发？我用这个uniform_int_distribution在我的代码中，但我收到警告: 54988961.cpp: In function ‘int ma
performance - postgresql 的负载平衡/分布
在花了相当多的时间试图了解如何在 postgresql 数据库服务器之间实现负载平衡(分配数据库处理负载)之后，我来到这里。我有一个 postgresql 系统，每秒吸引大约 100 笔交易，而且这
python - 创建一个 python 分布
所以标题已经说明了一切。我们正在开发一个开始获得大量依赖项的项目。到目前为止，我们一直在使用 setuptools，但越来越多的依赖项要么不容易安装(例如 wxPython)，要么在某些使用 easy
c++ - boost student_t 分布
我有以下代码: #include #include #include using namespace boost::numeric; using namespace interval_lib;
c# - 通过随机数生成确保均匀(ish)分布
我有一个对象列表，我想以随机顺序连续访问这些对象。我想知道是否有一种方法可以确保随机值并不总是相似。例子。我的列表是队列列表，我试图交错这些值以生成用于测试的真实场景。我并不是特别想要队列 1

首页

博学

6Ren·AI

商城

javascript - 以适当的 Angular 将div分布在一个圆圈中