绘制图片
image.png
PictureRecorder recorder = new PictureRecorder();
Canvas c = new Canvas(recorder);
final paint = new Paint();
paint.color = const Color(0xFF333333);
paint.style = PaintingStyle.fill;
c.drawRRect(
RRect.fromRectAndRadius(
Rect.fromPoints(Offset(0.0, 0.0), Offset(50.0, 50.0)),
Radius.circular(2)),
paint);
var picture = await recorder.endRecording().toImage(50, 50);
var pngImageBytes = await picture.toByteData(format: ImageByteFormat.png);
imgBytes = Uint8List.view(pngImageBytes.buffer);
可以通过
Image.memory(imgBytes)显示
绘制文字
ParagraphBuilder pb = ParagraphBuilder(ParagraphStyle(
textAlign: TextAlign.center,
fontWeight: FontWeight.w300,
fontStyle: FontStyle.normal,
fontSize: hitNode == node ? 20.0 : 15.0,
));
pb.pushStyle(ui.TextStyle(color: Color(0xff00ff00)));
pb.addText('${node.index + 1}');
ParagraphConstraints pc = ParagraphConstraints(width: node.rect.width);
//这里需要先layout, 后面才能获取到文字高度
Paragraph paragraph = pb.build()..layout(pc);
//文字居中显示
Offset offset = Offset(node.rect.width * (node.curIndex%level), node.rect.width * ((node.curIndex/level).floor() + 0.5) - paragraph.height/2);
canvas.drawParagraph(paragraph, offset);