美文网首页
flutter生成图片,绘制文字

flutter生成图片,绘制文字

作者: 天一呀 | 来源:发表于2019-08-02 10:21 被阅读0次

绘制图片

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);

相关文章

网友评论

      本文标题:flutter生成图片,绘制文字

      本文链接:https://www.haomeiwen.com/subject/elukdctx.html