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();
相关推荐
恋猫de小郭14 小时前
Android 17 + OkHttp 5.5.0 ,全新 ECH 下你的 HTTPS 域名可以请求时被安全隐藏
android·前端·flutter
「、皓子~2 天前
海狸IM 2.1 正式发布
flutter·微服务·golang·electron·开源软件·im·海狸im
里欧跑得慢2 天前
AI 驱动的 UI 国际化方案自动适配:从单一语言到多语言布局的智能转换
前端·css·flutter·web
恋猫de小郭2 天前
AI 时代,一个优化 Flutter 的重复代码工具 Deslop
android·前端·flutter
ljt27249606613 天前
Flutter笔记--envied
前端·笔记·flutter
加农炮手Jinx3 天前
Flutter for OpenHarmony 实战:flutter_animate 声明式动画让 UI 灵动如原生
flutter·ui·华为·harmonyos·鸿蒙
里欧跑得慢3 天前
Flutter 像素级还原:设计稿到代码的视觉无损转换技巧
前端·css·flutter·web
里欧跑得慢3 天前
Flutter 三方库 function_tree — 鸿蒙应用开发中的动态数学公式解析与计算神器,实现鸿蒙深度适配下的复杂函数逻辑运行时求值实战(适配鸿蒙 HarmonyOS Next ohos)
android·前端·安全·flutter·华为·harmonyos
吃西瓜的年年4 天前
vue3原理思维导图
vue.js·笔记·flutter