Question

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

我想生成随机大小的六边形，这些六边形仍然是完美的＃34;（比例）。

最左边的顶点将位于（0,0）。我想要考虑与最左边的顶点相关的其他顶点。＆＃34;离左顶点很远，从它那么多，从它那么多下来......＆＃34; 这不是那么直接的原因，是因为我需要它成比例。

目前，这是我静态定义的六边形之一：

        // 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中这样做，但公式真的是我之后的。谢谢你的帮助。

的解决方案

以下是我的功能最终看起来像BTW：

如果你想看看我在做什么，这就是： 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>

Answer 2

然后只是缩放点

xi=Xi*scale;
yi=Yi*scale;

其中Xi，Yi是您的原始点坐标
xi，yi是你新的随机六角点
比例是随机因素＆gt; 0.0
你的x0，y0是（0.0,0.0）
缩放后，这不会改变，因此您不需要任何翻译

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

2 个答案: