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

问题描述

我需要一些帮助写一个方程。

我想生成仍然是完美（比例）的随机大小的六边形。

最左边的顶点将位于（0,0）。
我想想其他顶点相对于最左边的顶点。
这么多从左边的顶点，这么多从右到右，从这么多下来...
这不是这么直接的原因，是因为我需要它是成比例的。

此时，这是我的静态定义的六边形之一：

  // return {
 // x1：（x + 0），y1：（y + 0），
 // x2：（x + 30），y2： 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中这样做，但公式真的是我的后。
感谢您的帮助。

解决方案
$ b

这是我的功能最终看起来像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）; //计算中心x坐标
 var centerY = middleY; //计算中心y坐标
 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 ++）{//绘制多少层
 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（）; 
} 
}; 
  

解决方案

六边形是一个正多边形，

• 它有6个顶点，


• 每个顶点距离中心点距离称为其半径），

下面是一个函数的示例，它将绘制一个指定半径的非旋转六边形，其最左边的顶点在指定点：

  body {background-color ：象牙padding：10px; } canvas {border：1px solid red;}  

  < / h4>< canvas id =canvaswidth = 300 height = 300>< / canvas>  

I need some help writing an equation.

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

The leftmost vertice will be positioned at (0,0). I want to think of the other vertices in relation to that leftmost vertice. "So much up from the left vertice, 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)
        // };

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

Solution

Here is what my function ended up looking like BTW:

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:

• it has 6 vertices,
• each vertex is exactly the same distance from the centerpoint (the distance is known as its radius),

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