Filter by Widgets


Canvas tutorial 03 | How to draw a regular round angle polygon?

This is posted by niebin312 at 04-01-2019 17:15:23




With this tutorial, you can use the canvas better and learn some new knowledge about the shape.

Before the start, make sure you have read the https://medium.com/flutteropen/canvas-tutorial-02-how-to-draw-round-angle-polygon-in-the-flutter-7890e933cfb1" class="markup--anchor markup--p-anchor" target="_blank">Canvas tutorial 02 and https://medium.com/flutteropen/canvas-tutorial-01-how-to-use-the-canvas-in-the-flutter-8aade29ddc9" class="markup--anchor markup--p-anchor" target="_blank">Canvas tutorial 01

0. What we will implement?

In the https://medium.com/flutteropen/canvas-tutorial-02-how-to-draw-round-angle-polygon-in-the-flutter-7890e933cfb1" class="markup--anchor markup--p-anchor" target="_blank">Canvas tutorial 02, I tell you how to implement the round angle polygon with points, But if we want to draw a regular polygon with that way, we must have many points, for example, we want to draw 10 sides of polygon, we must input 10 points one by one, that is complex to use. But this time I will use a simple way to comply with it. The result is here,we will create it with easy way. Let’s go!

1. Convert radian to point

Regular polygon

When we see the regular polygon above, we should know, there is a circle surround it and all points of the polygon are properly located on the edge. And the edges of the polygon are equal. So the radian between two points is equal too. So if we just give the center point and radius, The location of the regular polygon will be certain, the change element is just the start radian and the edge number of the polygon. When we certain these things, the polygon will be definite. But while we certain center, radius, radian, and number. How we draw the polygon, we remember in the fore tutorial of https://medium.com/flutteropen/canvas-tutorial-02-how-to-draw-round-angle-polygon-in-the-flutter-7890e933cfb1" class="markup--anchor markup--p-anchor" target="_blank">Canvas tutorial 02, we create a polygon with points, so can we convert radians to points and use the points to draw again? Yes, we can. Let’s see the points on the circle edge. 

If we have the center point and radius of a circle, it is easy for us to get the point with giving radian, this is easy for us to convert the radian to points, Let’s look at the code.

///give the center ,radius of the circle,
///and have radian from x clockwise direction.
///you can get the point coordinate in the circle.
static Point radianPoint(Point center, double r, double radian) {
return Point(center.x + r * cos(radian), center.y + r * sin(radian));
}

3. Get points with radian

We have the point in the circle, If we have the num and start radian, we can get all points on the edge of the cirle. Let’s see the code:

static List<Point> convertToPoints(Point center, double r, int num,
{double startRadian = 0.0}) {
var list = List<Point>();
double perRadian = 2.0 * pi / num;
for (int i = 0; i < num; i++) {
double radian = i * perRadian + startRadian;
if (radian > 2 * pi) {
radian -= 2 * pi;
}
var p = LineCircle.radianPoint(center, r, radian);
list.add(p);
}
return list;
}

4. Draw the regular round angle polygon.

We have drawn the round angle polygon in the fore tutorial. Now, we have points, we just use points as common points to draw will be ok, it will be a regular polygon. I paste the fore code here you can look. 

void _drawWithPoint(canvas, paint, list, {hasShadow = false}) {
list = _resizePoint(list);
var path = PolygonUtil.drawRoundPolygon(list, canvas, paint, distance: 2.0);
if (hasShadow) {
canvas.drawShadow(path, Colors.black26, 10.0, true);
}
canvas.drawPath(path, paint);
}

List<Point> _resizePoint(List<Point> list) {
List<Point> l = List<Point>();
for (var p in list) {
l.add(Point(_sizeUtil.getAxisX(p.x), _sizeUtil.getAxisY(p.y)));
}
return l;
}

then in the function ofpoint(canvas,size), you can call like this to draw.

List<Point> list4 = PolygonUtil.convertToPoints(
center, radius, polygonCount,
startRadian: i * pi / 10);
_drawWithPoint(canvas, paint, list4);

if you do not know the function `PolygonUtil.drawRoundPolygon`, you should get the whole code in the GitHub: https://github.com/FlutterOpen/flutter-canvas" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">https://github.com/FlutterOpen/flutter-canvas and see the tutorial 2.

5. Draw the same center polygon

We have seen the picture in the head, the same center polygon is very beautiful. But how can we draw it? Let’s see the code. 

void _drawSameCenterPolygon(Canvas canvas, Paint paint,
{Point center,
double max = 1.0,
double min = 1.0,
double step = 1.0,
int count = 1,
int polygonCount,
List<Color> colors,
rotateRadio = 0.0}) {
for (int i = 0; i < count; i++) {
assert(polygonCount >= 3);
assert(colors != null && colors.length > 0);
var radius = max - i * step;
var index = i % colors.length;
paint.color = colors[index];
if (radius < min) {
radius = min;
List<Point> list4 = PolygonUtil.convertToPoints(
center,
radius,
polygonCount,
);
_drawWithPoint(canvas, paint, list4);
break;
}
List<Point> list4 = PolygonUtil.convertToPoints(
center, radius, polygonCount,
startRadian: i * pi * rotateRadio);
_drawWithPoint(canvas, paint, list4);
}
}

Then we can use it in the function point(canvas,size) .

var paint = Paint()
..style = PaintingStyle.fill
..color = BLUE_NORMAL
..strokeWidth = 2.0
..isAntiAlias = true;
var center = Point(250.0, 250.0);
var colors = [
RED_DARK1,
RED_DARK2,
YELLOW_NORMAL,
BLUE_DARK1,
RED_DARK3,
BLUE_NORMAL
];
_drawSameCenterPolygon(canvas, paint,
center: center,
max: 250,
min: 10,
count: 100,
polygonCount: 3,
step: 30,
colors: colors);
canvas.save();
canvas.restore();

Then we will draw this picture.

When we change the code.

..style = PaintingStyle.stroke
..strokeWidth = 10.0

and 

count: 6,
polygonCount: 4,
step: 40,
colors: colors,
rotateRadio: 0.0

It will be shown like this.

Other pictures, you can change the code as above, you will say so many beautify picture is here.

Conclusion

In this tutorial, we find the most important key point about the circle and the polygon, if you know that, everything will be easy to comply.

Thanks for your reading, the whole project is here, thanks for a star: 

https://github.com/FlutterOpen/flutter-canvas

--end-- 

Developer: https://github.com/nb312

facebook page: https://www.facebook.com/flutteropen

facebook group: https://www.facebook.com/groups/948618338674126/



0 Comments
Login to comment.
Recent Comments

Be the first to Comment. You can ask a Query or Share your toughts or Just say thanks.




Recent articles

Horizontal List View

Check out this article on Horizontal List View

Read full post

How to get the Width and Height of the Screen in Flutter?

Check out this article on How to get the Width and Height of the Screen in Flutter?

Read full post

How to add a Footer Buttons in Flutter?

Check out this article on How to add a Footer Buttons in Flutter?

Read full post

TextField in Flutter

Check out this article on TextField in Flutter

Read full post

How to Draw a Triangle using Canvas in Flutter?

Check out this article on How to Draw a Triangle using Canvas in Flutter?

Read full post

url_launcher Package - Lets Launch URL, Send Email, Make Call or Send SMS in Flutter

Check out this article on url_launcher Package - Lets Launch URL, Send Email, Make Call or Send SMS in Flutter

Read full post

Error: The name 'RangeSlider' is defined in the libraries 'package:flutter/src/material/range_slider.dart' and 'package:flutter_range_slider/src/flutter_range_slider.dart'.

Check out this article on Error: The name 'RangeSlider' is defined in the libraries 'package:flutter/src/material/range_slider.dart' and 'package:flutter_range_slider/src/flutter_range_slider.dart'.

Read full post

How to create a persistent bottom sheet in Flutter?

Check out this article on How to create a persistent bottom sheet in Flutter?

Read full post

How to draw a Decorative Horizontal line in Flutter?

Check out this article on How to draw a Decorative Horizontal line in Flutter?

Read full post

How to fetch an Image from Internet in Flutter

Check out this article on How to fetch an Image from Internet in Flutter

Read full post

© 2018 - Fluttercentral | Email to me - Seven.srikanth@gmail.com

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License , and code samples are licensed under the BSD License.