Hexagon Zeichnen

[Lalo Scalf]

Inthis article, we are going to learn how to get a perfect hexagon grid using JavaScript to draw on an HTML canvas. We first need to know a bit of trigonometry to solve this problem as it is necessary for all the calculations for the coordinate points composing a regular polygon.

So each of its vertexes intersects with the circumference. Drawing from the premise that the centre of the circumference is the point of origin (0,0) we can easily calculate the most-right and most-left vertexes are (r, 0) and (-r,0) respectively, however, what are the positions of the rest of the points? Here is where trigonometry comes into play.

It is very useful to know any side of the triangle if you know one of its other sides and the angle it forms. For this case, the angle formed by each vertex with the horizontal axis is equal by dividing the circumference by the number of sides (360 / 6 = 60) and we also know that the hypotenuse is equal to the radius of the circumference r. From the first equation we can say that a = c sinα and b = c cosα. In summary, putting all together the second vertex coordinates are (rcos60,rsin60).

In order to draw a regular hexagon we define a function named drawHexagon(x,y) being x and y the center point. We are going to use a path that allows to set the coordinates before drawing them and when finished we use stroke() to draw only the border line. It is possible doing a for loop to draw a line between each vertex so the result is as follows:

Essentially it is important to know where the next centre is going to be located to fit perfectly with one another. First, notice how much horizontally is placed the purple arrow. It is a distance of the radius r plus a segment we already know as rcos60. And same as vertically, a segment of rsin60 downwards. The procedure is always adding the same amount horizontally and alternating vertically.

Finally we arrive to the solution on how to draw many hexagons in a row as we initially intended. We define a function named drawGrid(width,height) that prints what we have just explained up to this point:

This would be the final scheme of our grid, showing the first four centres of each row to get a good view on what is going on. From the centre (0,0) we can see that the blue arrow takes a distance of twice the length of the hexagon height that sums up to 2rsin60. The rest is going to be the same taking into account this offset. We modify our function to draw many lines as the last hexagon fits in the canvas height.

Hello Electric Quilters! We had so much fun designing pieced hexagons with my last lesson, I decided to share some tips in creating quilt layouts for those hexagons. Using non-square blocks is sometimes tricky, but there are several methods we can use to create some beautiful quilt layouts. In this lesson, we will explore the EQ8 one patch tool. We will be using the hexagon shape and pieced blocks we created from my previous lesson , Designing Pieced Hexagons. Head on over to that lesson if you have not created them yet.

Lori J. Miller lives in Oxford, Michigan, where she designs, stitches and sews quilts and quilty things. She loves experimenting with fun colors and designs to make playful and clever products for the modern sewist. Lori continues to share her knowledge with others teaching quilting and EQ8 classes around the country. A self professed EQ8 superfan, you can follow her quilting adventures on her blog at lorimillerdesigns.com or on instagram @lorimillerdesigns

Cindy, The block is not in the library. In the first paragraph, there is a link to my previous lesson where you create the pieced hexagon blocks. We created the blocks first and this is the first layout lesson where we use them. I hope that helps.

Thank you for visiting Behind the Mouse, the Electric Quilt Blog. We are happy to share content with you in hopes that we can all learn and create together. But please be aware that all content and images on this website are copyrighted to The Electric Quilt Company, our guest bloggers, and the EQ users who share their content here.

wikiHow ist ein "wiki", was bedeutet, dass viele unserer Artikel von zahlreichen Mitverfassern geschrieben werden. An diesem Artikel arbeiteten bis jetzt 82 Leute, einige anonym, mit, um ihn immer wieder zu aktualisieren.

Dieser Artikel wurde 110.592 Mal aufgerufen.

Ein regelmiges Sechseck, auch gleichseitiges Sechseck genannt, besitzt sechs gleichlange Seiten und sechs identische Winkel. Es stehen dir mehrere Darstellungsmglichkeiten offen: Du kannst ein exaktes Sechseck mit Hilfe von einem Zirkel und einem Lineal zeichnen, ein etwas groberes Rechteck mit Hilfe eines runden Objekts und einem Lineal oder ein skizziertes Sechseck mit Hilfe deines Augenmaes. Folge einfach den folgenden Schritten, um die verschiedenen Mglichkeiten zur Darstellung eines Sechsecks kennenzulernen.

This method simply loops through rows and columns drawing the corresponding hexagons.For each row, it gets the points for the first hexagon in the row. The first hexagon sits above the odd-numbered hexagons so if it won't fit then no other hexagons on the row will fit. In that case, the method breaks out of its outer loop and is done.For the row, the method loops through columns drawing the row's hexagons. If a hexagon won't fit horizontally, the method has finished the row and breaks out of the inner loop so it can draw the next row.If a hexagon won't fit vertically, that means it's an odd-numbered hexagon that sticks off the bottom edge of the drawing area. In that case the method simply skips that hexagon and continues drawing other even-numbered hexagons to the right.The following code shows how the program redraws the grid plus any selected hexagons.// Redraw the grid.private void picGrid_Paint(object sender, PaintEventArgs e) e.Graphics.SmoothingMode = SmoothingMode.AntiAlias; // Draw the selected hexagons. foreach (PointF point in Hexagons) e.Graphics.FillPolygon(Brushes.LightBlue, HexToPoints(HexHeight, point.X, point.Y)); // Draw the grid. DrawHexGrid(e.Graphics, Pens.Black, 0, picGrid.ClientSize.Width, 0, picGrid.ClientSize.Height, HexHeight);

This method is a little easier to understand than the previous post's PointToTriangle method because it doesn't need to worry about upside down triangles. It does need to deal with odd- and even-numbered columns, however.The method starts by calculating a candidate row and column. These assume the hexagon's lie in rectangles with normal height and width 3/4s of the hexagon's width. Figure 4 shows the test rectangle for grid cell (2, 2).If the point lies in the left part of the rectangle, then it may sit above or below the candidate hexagon. (In the little white areas inside the rectangle.) The program performs some calculations to see if the point sits above or below the hexagon and updates the row and column if necessary.The program uses the PointToHex method in two places: the MouseMove and MouseClick event handlers.// Display the row and column under the mouse.private void picGrid_MouseMove(object sender, MouseEventArgs e) int row, col; PointToHex(e.X, e.Y, HexHeight, out row, out col); this.Text = "(" + row + ", " + col + ")";// Add the clicked hexagon to the Hexagons list.private void picGrid_MouseClick(object sender, MouseEventArgs e) int row, col; PointToHex(e.X, e.Y, HexHeight, out row, out col); Hexagons.Add(new PointF(row, col)); picGrid.Refresh();

As I was doing so, I started modifying the hexagon to enable drawing a number of shapes that are based on just a couple of parameters. Let's begin with what I did with the hexagon and we'll take it from there.

Now we need to figure out the x (horizontal) and y (vertical) position of points around the center, which when joined with a line, will make six equal sides. For this, we use the measurement from the center to the point (we'll call this the radius) and the angle of direction from the center.

Next we need to add a bit of trigonometry to find the x and y position of each point. For the x position, we can use the sum radius multiplied by cos(angle) and for the y position radius multiplied by sin(angle). Let's put it all together, adding to our JavaScript code above:

Let's say we wanted to draw a triangle, a square, or an octagon. All we would need to modify in the above function, used to draw the hexagon, is the number of times we draw lines in our for loop and the angle for each point.

This was a little introduction to the element for drawing on a web page and a few of the methods you can use to draw shapes. If you want to dive deeper into how all the pieces work, here's a recap of what we used:

To get some more inspiration for what you can do with the element, check out the Canvas tutorial that starts off with the basics and then covers more advanced topics like animation and pixel manipulation.

There are plenty of ways you can expand on this basic shape function. I like to include an inner radius, so you can create diamonds and stars. I've also experimented a little with curves instead of straight lines - feel free to experiment for yourself. Or try some tessellation, which is always fun!

Let me know if you try out this function and if you like it as much as I do. As always, feel free to leave any feedback on the GitHub discussion or join us for a chat in the MDN Web Docs Discord server.

\n As I was doing so, I started modifying the hexagon to enable drawing a number of shapes that are based on just a couple of parameters.\n Let's begin with what I did with the hexagon and we'll take it from there.\n

3a8082e126