绘制圆形内接的正多边形
Draw regular polygons inscribed in a circle
我正在尝试绘制内接在给定中心(x,y)和半径(r)的圆中的正多边形(正方形和等边三角形)。我用的是拉斐尔.js.
这是我画一个内接正方形的函数:
function draw_square(x,y,radius){
var side= radius*(Math.sqrt(2));
var x = x - (side/2);
var y = y - (side/2);
var square= paper.rect(x, y, side, side);
}
有人能告诉我如何画一个等边三角形(刻在一个给定的圆圈里)吗?
我第一次使用拉斐尔,所以您必须从以下内容中提取您需要的内容:
<html>
<body>
<div id="paper"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<script>
var paper = new Raphael(document.getElementById('paper'), 256, 256);
var x = 128, y = 128, r = 64, n = 9;
paper.circle(x, y, r);
var xx, yy, i, a, pathString = "";
for (i = 0; i <= n; ++i) {
a = ((4 * Math.PI * i) + (Math.PI * n) + (2 * Math.PI)) / (2 * n);
xx = x + r * Math.cos(a);
yy = y + r * Math.sin(a);
pathString += (i == 0 ? "M " : " L ") + xx + " " + yy;
}
pathString += " z";
paper.path(pathString);
</script>
</body>
</html>
EDIT:重构为使用var a,并且始终具有水平基准。
function draw_triangle(x, y, radius){
var x_offset =radius*(Math.cos(Math.PI/6));
var y_offset =radius*(Math.sin(Math.PI/6));
var x1 = x;
var y1 = y - radius;
var x2 = x + x_offset;
var y2 = y + y_offset;
var x3 = x - x_offset;
var y3 = y + y_offset;
var triangle = "M"+x1+","+y1+"L"+x2+","+y2+"L"+x3+","+y3+"Z";
var triangle= paper.path(triangle);
}
在trigo和raphael paper.path()的帮助下。
相关文章:
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 有没有一个javascript图形绘制库可以进行气球树布局
- 使用相同的数据集绘制各种符号
- 使用onclick绘制SVG路径
- 在谷歌地图上绘制位置数据库
- 用chart.js绘制条形图
- “可绘制地图”设置地图选项“纬度-经度”
- 多维数据集网格未在指定的分区中绘制
- 使用谷歌图表在x轴上绘制日期
- 使用fabric.js从矩形区域获取对象,并将该区域绘制到画布上
- 如何在React Native中绘制图形
- 画布中绘制的矩形区域的弹出工具提示
- 如何在OpenLayers中获取动态绘制的多边形的坐标
- 画布:逐像素绘制图像并请求动画帧计时
- D3从嵌套的JSON中绘制第二个圆环图
- 如何用d3.js绘制折线图
- 在WebGL中绘制多个二维图像
- JSXGraph:如何绘制带有箭头和无点标记的矢量
- 用图像而不是颜色填充对象(将图像绘制到画布上)
- 绘制圆形内接的正多边形