Drawing a fill polygon with drawRawPoints

[Andres Colubri]

Hello! I'm trying to draw fill polygons from a list of points using drawRawPoints(), but I only get the outline. For example, the following code:

Paint paint = Paint();
paint.style = PaintingStyle.fill;
paint.color = Color.fromRGBO(255, 0, 0, 1.0);
var points = Float32List.fromList([0.0, 0.0, 100.0, 0.0, 100.0, 100.0, 50.0, 100.0, 50.0, 150.0, 20.0, 150.0, 20.0, 100.0, 0.0, 100.0, 0.0, 0.0]);
canvas.drawRawPoints(PointMode.polygon, points, paint);

generates the following output:

Using the stroke paint style is also somewhat odd:

Paint paint = Paint();
paint.style = PaintingStyle.stroke;
paint.strokeWidth = 10.0;
paint.strokeJoin = StrokeJoin.bevel;
paint.color = Color.fromRGBO(255, 0, 0, 0.5);
var points = Float32List.fromList([0.0, 0.0, 100.0, 0.0, 100.0, 100.0, 50.0, 100.0, 50.0, 150.0, 20.0, 150.0, 20.0, 100.0, 0.0, 100.0, 0.0, 0.0]);
canvas.drawRawPoints(PointMode.polygon, points, paint);


since the line segments that form the outline don't seem to be connected with a bevel join, as set in the paint object:


Am I'm missing something? Thank you! 

[Chinmay Garde]

Instead of using raw points, try creating a path from the points and use Canvas.drawPath instead. When using raw points, I don't think you are able to convey the relationship between multiple path components.

Chinmay

--
You received this message because you are subscribed to the Google Groups "Flutter Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Andres Colubri]

Hi Chinmay, thanks for the suggestion. I tried Path.lineTo/moveTo() before hoping that would result in a closed polygon, but it generated separate line subpaths instead.

I revisited the Path API after reading your message, and found the path.addPolygon() method, and that one does the trick:

Path path = new Path();
var points = [Offset(0.0, 0.0), Offset(100.0, 0.0), Offset(100.0, 100.0), Offset(50.0, 100.0), Offset(50.0, 150.0), Offset(20.0, 150.0), Offset(20.0, 100.0), Offset(0.0, 100.0), Offset(0.0, 0.0)];
path.addPolygon(points, true);

Paint paint = Paint();
paint.style = PaintingStyle.fill;
paint.color = Color.fromRGBO(255, 0, 0, 1.0);

canvas.drawPath(path, paint);

paint.style = PaintingStyle.stroke;
paint.strokeWidth = 10.0;

paint.strokeJoin = StrokeJoin.round;
paint.color = Color.fromRGBO(150, 150, 150, 1.0);
canvas.drawPath(path, paint);

Thank you!