如何使用for循环绘制不同角度的圆线 [英] How to draw a lines in circle in different angles by using for loop
本文介绍了如何使用for循环绘制不同角度的圆线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我用下面的代码在圆上画了一条线，现在我想用相同的空间在不同的角度画12条线&线条应该接触到圆圈.
<头><风格>#直的{高度:30px；右边框:1px 纯蓝色；-webkit-transform:rotate(**" for loop value must be display"** deg);变换:旋转(**必须显示循环值"**度)；位置:绝对；顶部:40px；左:400像素；}#圆圈 {高度:30px；宽度:31px；左边距:81px；边距顶部:0px；背景色:#fff;边框:2px 纯蓝色；边框半径:65px；位置:绝对；}</风格><身体><div><div id="圆圈"><div style="position:relative; top:-40px; left:-385px;"><div id="straight"></div></html>
请帮帮我&提前致谢
解决方案
检查这个 fiddle.
它使用函数 DrawLine(x1,y1,x2,y2) 在给定的坐标之间画一条线.
基本上，它创建宽度较窄的 div 并根据斜率旋转它们.
看起来像带辐条的车轮.
如果您需要，这里有一个操作中的轮子.
这是片段.
drawNLines(12, 40, 40, 40);函数 drawNLines(N，centerX，centerY，半径){for (i = 0; i #circle {高度:80px；宽度:80px；左边距:30px；边距顶部:30px；背景色:#fff;边框:2px 纯蓝色；边框半径:80px；位置:绝对；}<div id="circle"></div>希望这会有所帮助.:)
I used below code to draw a line in circle,Now I want to draw 12 lines in different angles with same space & lines should be touched to the circle.
<!DOCTYPE html>
<html>
<head>
<style>
#straight{
height: 30px;
border-right: 1px solid blue;
-webkit-transform: rotate(**" for loop value must be displayed"** deg);
transform: rotate(**" for loop value must be displayed"** deg);
position: absolute;
top:40px;
left:400px;
}
#circle {
height: 30px;
width: 31px;
margin-left: 81px;
margin-top: 0px;
background-color: #fff;
border: 2px solid blue;
border-radius: 65px;
position:absolute;
}
</style>
</head>
<body>
<div>
<div id="circle">
<div style="position:relative; top:-40px; left:-385px;">
<div id="straight"></div>
</div>
</div>
</body>
</html>
Please help me & thanks in advance
解决方案
Check this fiddle.
It uses a function DrawLine(x1,y1,x2,y2) to draw a line between the given co-ordinates.
Basically, it creates divs with thin width and rotate them according the slope.
Looks like a wheel with spokes.
Here is a wheel in action if you need.
Here is the snippet.
drawNLines(12, 40, 40, 40);
function drawNLines(N, centreX, centreY, radius) {
for (i = 0; i < N; i++) {
angle = 360 / N;
x2 = centreX + radius * Math.cos(Math.PI * angle * i / 180);
y2 = centreY + radius * Math.sin(Math.PI * angle * i / 180);
DrawLine(centreX, centreY, x2, y2);
}
}
function DrawLine(x1, y1, x2, y2) {
if (y1 < y2) {
var pom = y1;
y1 = y2;
y2 = pom;
pom = x1;
x1 = x2;
x2 = pom;
}
var a = Math.abs(x1 - x2);
var b = Math.abs(y1 - y2);
var c;
var sx = (x1 + x2) / 2;
var sy = (y1 + y2) / 2;
var width = Math.sqrt(a * a + b * b);
var x = sx - width / 2;
var y = sy;
a = width / 2;
c = Math.abs(sx - x);
b = Math.sqrt(Math.abs(x1 - x) * Math.abs(x1 - x) + Math.abs(y1 - y) * Math.abs(y1 - y));
var cosb = (b * b - a * a - c * c) / (2 * a * c);
var rad = Math.acos(cosb);
var deg = (rad * 180) / Math.PI
htmlns = "http://www.w3.org/1999/xhtml";
div = document.createElementNS(htmlns, "div");
div.setAttribute('style', 'border:1px solid black;width:' + width + 'px;height:0px;-moz-transform:rotate(' + deg + 'deg);-webkit-transform:rotate(' + deg + 'deg);position:absolute;top:' + y + 'px;left:' + x + 'px;');
document.getElementById("circle").appendChild(div);
}
#circle {
height: 80px;
width: 80px;
margin-left: 30px;
margin-top: 30px;
background-color: #fff;
border: 2px solid blue;
border-radius: 80px;
position: absolute;
}
<div id="circle"></div>
Hope this helps. :)
这篇关于如何使用for循环绘制不同角度的圆线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
