flutter 实现文本贴图

关键代码

js 复制代码
var maxWordHeight = 0.0;

    for(var i = 0; i < line.length;i++){
      var char = line.substring(i,i+1);
      final textPainter = TextPainter(
        text: TextSpan(text: char, style: textStyle.apply(
            color: Colors.black
        )),
        textDirection: TextDirection.ltr,
      );
      textPainter.layout();
      textPainter.paint(canvas, Offset(offsetX,0));
      offsetX+= (textPainter.width + wordSpace);
      maxWordHeight = max(maxWordHeight, textPainter.height);
    }

    canvas.drawImageRect(
      labelItem.image!,
      Rect.fromLTWH(0, 0, labelItem.image!.width.toDouble(), labelItem.image!.height.toDouble()),
      Rect.fromLTWH(0, 0, labelItem.width, maxWordHeight),
      Paint()
      ..blendMode = BlendMode.plus,
    );

或者

js 复制代码
   canvas.saveLayer(Rect.fromLTWH(0, 0, labelItem.width, labelItem.height), Paint());
    for(var i = 0; i < line.length;i++){
      var char = line.substring(i,i+1);
      final textPainter = TextPainter(
        text: TextSpan(text: char, style: textStyle.apply(
            color: Colors.black
        )),
        textDirection: TextDirection.ltr,
      );
      textPainter.layout();
      textPainter.paint(canvas, Offset(offsetX,0));
      offsetX+= (textPainter.width + wordSpace);
      maxWordHeight = max(maxWordHeight, textPainter.height);
    }

    canvas.drawImageRect(
      labelItem.image!,
      Rect.fromLTWH(0, 0, labelItem.image!.width.toDouble(), labelItem.image!.height.toDouble()),
      Rect.fromLTWH(0, 0, labelItem.width, maxWordHeight),
      Paint()
      ..blendMode = BlendMode.srcIn,
    );
    canvas.restore();
相关推荐
2601_9495430118 小时前
Flutter for OpenHarmony垃圾分类指南App实战:我的成就实现
flutter
Miguo94well19 小时前
Flutter框架跨平台鸿蒙开发——海龟汤APP的开发流程
flutter·华为·harmonyos·鸿蒙
不爱吃糖的程序媛19 小时前
Flutter-OH 3.35.7-ohos-0.0.2 版本发布公告
flutter
无穷小亮19 小时前
Flutter框架跨平台鸿蒙开发——Excel函数教程APP的开发流程
flutter·华为·excel·harmonyos·鸿蒙
无穷小亮20 小时前
Flutter框架跨平台鸿蒙开发——打字练习APP开发流程
flutter·华为·harmonyos·鸿蒙
子春一21 小时前
Flutter for OpenHarmony:构建一个高精度 Flutter 计时器:深入解析 Timer、状态同步与 UI 响应式设计
flutter·ui
雨季66621 小时前
构建 OpenHarmony 简易文字行数统计器:用字符串分割实现纯文本结构感知
开发语言·前端·javascript·flutter·ui·dart
雨季66621 小时前
Flutter 三端应用实战:OpenHarmony 简易倒序文本查看器开发指南
开发语言·javascript·flutter·ui
九 龙21 小时前
Flutter框架跨平台鸿蒙开发——水电缴费提醒APP的开发流程
flutter·华为·harmonyos·鸿蒙
2401_8920005221 小时前
Flutter for OpenHarmony 猫咪管家App实战 - 添加支出实现
前端·javascript·flutter