计算随机生成的六边形的6个顶点 [英] Calculate 6 vertices of randomly generated hexagon

问题描述

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

I need some help writing an equation.

我想生成随机大小仍为完美"(比例)的六边形.

I want to generate hexagons of random sizes that are still "perfect"(proportional).

最左边的顶点将位于(0,0). 我想考虑与该最左边顶点有关的其他顶点. 从左顶点开始有很多上升，从右顶点附近有很多上升，而从它顶点附近有很多下降……" 之所以不是那么简单，是因为我需要它与比例成比例.

The leftmost vertex will be positioned at (0,0). I want to think of the other vertices in relation to that leftmost vertex. "So much up from the left vertex, so much right from it, so much down from it..." The reason this is not so straight forward, is because I need it to be proportional.

此刻，这是我静态定义的六边形之一:

At the moment, this is what one of my statically defined hexagons look like:

        // 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进行此操作，但是公式确实是我所追求的. 感谢您的帮助.

I'm doing this in JavaScript, but the formula is really what I'm after. Thanks for your help.

解决方案

Solution

这是我的功能最终看起来像BTW:

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

If you want to see what I was doing this is it: 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(); 
    }
};

推荐答案

六边形是规则的多边形，具有以下属性:

A hexagon is a regular polygon and has these properties:

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

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

Here's an example of a function that will draw a non-rotated hexagon with a specified radius and with its leftmost vertex at a specified point:

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>

这篇关于计算随机生成的六边形的6个顶点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！