Canvas tutorial 02 and [https://medium.com/flutteropen/canvas-tutorial-01-how-to-use-the-canvas-in-the-flutter-8aade29ddc9data-href="[ https:="medium.com="flutteropen="canvas-tutorial-01-how-to-use-the-canvas-in-the-flutter-8aade29ddc9"="](https://medium.com/flutteropen/canvas-tutorial-01-how-to-use-the-canvas-in-the-flutter-8aade29ddc9)markup--anchor markup--p-anchortarget="_blank">Canvas tutorial 01
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!
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.
*markup--em markup--pre-em](convertToPoints*(Point center, double r, int num,
{double startRadian = 0.0}) {
**markup--strong markup--pre-strong](var **list = List();
double perRadian = 2.0 * pi / num;
**markup--strong markup--pre-strong](for **(int i = 0; i 2 * pi) {
radian -= 2 * pi;
}
**markup--strong markup--pre-strong](var **p = LineCirc*markup--em markup--pre-em](le.radianPoint(center, r, radian);
list.add(p);
}
***markup--strong markup--pre-strong](*markup--em markup--pre-em](return ****markup--em markup--pre-em](list;
}* _resizePoint(List list) {
List l = List();
**markup--strong markup--pre-strong](for **(**markup--strong markup--pre-strong](var **p **markup--strong markup--pre-strong](in **list) {
l.add(Point(_sizeUtil.getAxisX(p.x), _sizeUtil.getAxisY(p.y)));
}
**markup--strong markup--pre-strong](return **l;
} list4 = PolygonUtil.*markup--em markup--pre-em](convertToPoints*(
center, radius, polygonCount,
startRadian: i * pi / 10);
_drawWithPoint(canvas, paint, list4);[https://github.com/FlutterOpen/flutter-canvas](https://github.com/FlutterOpen/flutter-canvas) and see the tutorial 2.
colors,
rotateRadio = 0.0}) {
**markup--strong markup--pre-strong](for **(int i = 0; i = 3);
**markup--strong markup--pre-strong](assert**(colors != **markup--strong markup--pre-strong](null **&& colors.length > 0);
**markup--strong markup--pre-strong](var **radius = max - i * step;
**markup--strong markup--pre-strong](var **index = i % colors.length;
paint.color = colors[index];
**markup--strong markup--pre-strong](if **(radius list4 = PolygonUtil.*markup--em markup--pre-em](convertToPoints*(
center,
radius,
polygonCount,
);
_drawWithPoint(canvas, paint, list4);
**markup--strong markup--pre-strong](break**;
}
List list4 = PolygonUtil.*markup--em markup--pre-em](convertToPoints*(
center, radius, polygonCount,
startRadian: i * pi * rotateRadio);
_drawWithPoint(canvas, paint, list4);
}
}
Tags: