Play Flutter Quiz. Click here .

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

This is posted by 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" class="markup--anchor markup--p-anchor" target="_blank">Canvas tutorial 02 and" class="markup--anchor markup--p-anchor" target="_blank">Canvas tutorial 01

0. What we will implement?

In the" 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" 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);
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:" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank"> 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(
_drawWithPoint(canvas, paint, list4);
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() = PaintingStyle.fill
..color = BLUE_NORMAL
..strokeWidth = 2.0
..isAntiAlias = true;
var center = Point(250.0, 250.0);
var colors = [
_drawSameCenterPolygon(canvas, paint,
center: center,
max: 250,
min: 10,
count: 100,
polygonCount: 3,
step: 30,
colors: colors);;

Then we will draw this picture.

When we change the code. = PaintingStyle.stroke
..strokeWidth = 10.0


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.


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:



facebook page:

facebook group:


Login to comment.

Recent Comments

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

© 2018 - Fluttercentral | Email to me -

Terms | Privacy