绘制内接圆的正多边形答案

【问题标题】：Draw regular polygons inscribed in a circle绘制内接圆的正多边形
【发布时间】：2015-06-26 03:36:32
【问题描述】：

我正在尝试绘制以给定中心 (x,y) 和半径 (r) 为圆心的正多边形（正方形和等边三角形）。我正在使用 raphael.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);
}

谁能解释我如何绘制等边三角形（内接在给定的圆中）？

【问题讨论】：

标签： javascript raphael

【解决方案1】：

我第一次使用 raphael，所以您必须从以下内容中提取您需要的内容：

<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>

编辑：重构为使用 var a，并始终具有水平底座。

【讨论】：

这正是我想要做的。有没有机会，多边形可以旋转？
是的！所以我在那里做了一些多余的工作，计算了两次角度。上面写着2 * Math.PI / n * i 的位。您可以添加一些数字来旋转。请记住，您需要添加弧度，而不是度数，其中 2*PI 弧度 == 360 度。如果您在转换方面需要帮助，请告诉我！
我可以使用shape.rotate(degrees, x, y)。但是不知道旋转的角度和多边形的边数是什么关系。
哦，你想要什么轮换？例如，您是否想始终保证在北方位置有一个点？或者你想旋转一些可变的、未知的数量？
呃，使基线水平的计算有点难以应付，但应该可以！ :)

【解决方案2】：

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() 的帮助下。

【讨论】：