javascript - 计算随机生成的六边形的6个顶点

Question

我需要一些帮助来编写方程式。

我想生成仍然“完美”(成比例)的随机大小的六边形。

最左边的顶点将位于 (0,0)。我想考虑与最左边的顶点相关的其他顶点。“从左顶点向上这么多，从它右边这么多，从它向下这么多......”这不是那么简单的原因是因为我需要它成比例。

目前，这就是我静态定义的六边形之一的样子:

        // return {
        //  x1: (x+0), y1: (y+0),
        //  x2: (x+30), y2: (y-50),
        //  x3: (x+83), y3: (y-50),
        //  x4: (x+113), y4: y,
        //  x5: (x+83), y5: (y+50),
        //  x6: (x+30), y6: (y+50)
        // };

我是用 JavaScript 做的，但公式确实是我想要的。感谢您的帮助。

解决方案

这是我的函数最终的样子顺便说一句:

如果你想看看我在做什么，那就是: http://www.sidequestsapps.com/projects/CaptoType/game.html

function drawRotatingHexagon(leftX, middleY, radius, ctx) {
    //console.log(x + ',' + y);
    var centerX = (Math.floor(leftX)+radius); // Calculate center x coord
    var centerY = middleY; // Calculate center y coord
    ctx.translate(centerX, middleY); // Center pivot inside hexagon     
    ctx.rotate(rotValue*(Math.PI/180)); // Rotate           
    ctx.translate(-centerX, -middleY); // Un-Translate  
    for (var c=1; c<=3;c++) { // How many layers to draw
        ctx.beginPath();
        ctx.moveTo (centerX+radius*Math.cos(0), centerY+radius*Math.sin(0));          
        for (var i=1; i<=6;i++) {
            ctx.lineTo(centerX+radius*Math.cos(i*Math.PI/3),
                       centerY+radius*Math.sin(i*Math.PI/3));
        }
        ctx.stroke(); 
    }
};

Answer 1

六边形是正多边形，具有以下属性:

• 它有 6 个顶点，
• 每个顶点到中心点的距离完全相同(该距离称为其半径)，

下面是一个函数示例，该函数将绘制一个具有指定半径且最左侧顶点位于指定点的非旋转六边形:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

// draw your original hexagon
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(30,-50);
ctx.lineTo(83,-50);
ctx.lineTo(113,0);
ctx.lineTo(83,50);
ctx.lineTo(30,50);
ctx.closePath();
ctx.lineWidth=3;
ctx.stroke();

// same hexagon using drawHexagon()
ctx.strokeStyle='red';   
ctx.lineWidth=1;
drawHexagon(0,0,113/2);

function drawHexagon(leftX,middleY,radius){
  var centerX=leftX+radius;
  var centerY=middleY;    
  ctx.beginPath();
  ctx.moveTo (centerX+radius*Math.cos(0), centerY+radius*Math.sin(0));          
  for (var i=1; i<=6;i++) {
    ctx.lineTo(centerX+radius*Math.cos(i*2*Math.PI/6), centerY+radius*Math.sin(i*2*Math.PI/6));
  }
  ctx.closePath();
  ctx.stroke();
}

body{ background-color: ivory; padding:10px; }
canvas{border:1px solid red;}

<h4>Fn() to draw hexagon with specified radius and left-midpoint.</h4>
<canvas id="canvas" width=300 height=300></canvas>