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();
相关推荐
ujainu19 分钟前
Flutter + OpenHarmony 实现经典打砖块游戏开发实战—— 物理反弹、碰撞检测与关卡系统
flutter·游戏·openharmony·arkanoid·breakout
微祎_31 分钟前
构建一个 Flutter 点击速度测试器:深入解析实时交互、性能度量与响应式 UI 设计
flutter·ui·交互
王码码203540 分钟前
Flutter for OpenHarmony 实战之基础组件:第二十七篇 BottomSheet — 动态底部弹窗与底部栏菜单
android·flutter·harmonyos
ZH15455891311 小时前
Flutter for OpenHarmony Python学习助手实战:Web开发框架应用的实现
python·学习·flutter
晚霞的不甘1 小时前
Flutter for OpenHarmony 构建简洁高效的待办事项应用 实战解析
flutter·ui·前端框架·交互·鸿蒙
百锦再2 小时前
Vue高阶知识:利用 defineModel 特性开发搜索组件组合
前端·vue.js·学习·flutter·typescript·前端框架
廖松洋(Alina)2 小时前
【收尾以及复盘】flutter开发鸿蒙APP之成就徽章页面
flutter·华为·开源·harmonyos·鸿蒙
ZH15455891313 小时前
Flutter for OpenHarmony Python学习助手实战:机器学习算法实现的实现
python·学习·flutter
廖松洋(Alina)3 小时前
【收尾以及复盘】flutter开发鸿蒙APP之打卡日历页面
flutter·华为·开源·harmonyos·鸿蒙
廖松洋(Alina)3 小时前
【收尾以及复盘】flutter开发鸿蒙APP之本月数据统计页面
flutter·华为·开源·harmonyos·鸿蒙