查找文本的确切边界

我需要知道一段文本的确切边界——相当于获取文本边界 https://developer.android.com/reference/android/graphics/Paint.html对于安卓。我意识到这在某种程度上与 Flutter 的设计背道而驰，但我以非传统的方式使用文本（就好像文本以精确的位置和大小嵌入到艺术图片中）。

我尝试了三种方法：

• TextPainter's minIntrinsicWidth and height。来源如下。这会产生一个四周都有空间的边界框：

  我需要该矩形的边正好与“8”的黑色像素相对。 （在这种特殊情况下，width and maxIntrinsicWidth给出相同的值minIntrinsicWidth; also, preferredLineHeight给出相同的值height.)

• Paragraph's getBoxesForRange-- 与 TextPainter 的结果基本相同。

• FittedBox-- 也留有空格，无论BoxFit枚举值。我用了这个答案 https://stackoverflow.com/a/51680076/10234868作为起点。

TextPainter代码如下。 （我意识到这是低效的；在获得所需的边界框之前我并不关心。我使用场景/图片/等希望在较低级别中找到适当的功能。）

import 'dart:ui';
import 'dart:typed_data';
import 'package:flutter/painting.dart';

const black = Color(0xff000000);
const white = Color(0xffffffff);

final identityTransform = new Float64List(16)
  ..[0] = 1.0
  ..[5] = 1.0
  ..[10] = 1.0
  ..[15] = 1.0;

TextPainter createTextPainter() {
  return new TextPainter(
    text: new TextSpan(
      text: '8',
      style: new TextStyle(
        color: black,
        fontSize: 200.0,
        fontFamily: "Roboto",
      ),
    ),
    textDirection: TextDirection.ltr,
  )..layout();
}

void drawBackground(Canvas canvas, Rect screen) {
  canvas.drawRect(
      screen,
      new Paint()
        ..color = white
        ..style = PaintingStyle.fill);
}

Picture createPicture() {
  final recorder = new PictureRecorder();
  final screen = Offset.zero & window.physicalSize;
  final canvas = new Canvas(recorder, screen);
  final offset = screen.center;
  final painter = createTextPainter();
  final bounds = offset & Size(painter.minIntrinsicWidth, painter.height);
  drawBackground(canvas, screen);
  painter.paint(canvas, offset);
  canvas.drawRect(
      bounds,
      new Paint()
        ..color = black
        ..style = PaintingStyle.stroke
        ..strokeWidth = 3.0);
  return recorder.endRecording();
}

Scene createScene() {
  final builder = new SceneBuilder()
    ..pushTransform(identityTransform)
    ..addPicture(Offset.zero, createPicture())
    ..pop();
  return builder.build();
}

void beginFrame(Duration timeStamp) {
  window.render(createScene());
}

void main() {
  window.onBeginFrame = beginFrame;
  window.scheduleFrame();
}

要忽略该填充，您必须进行really低级调用作为Text整个空间实际上是被粉刷在一起的。我尝试在互联网上搜索是否有其他方法，但找不到任何可以真正解决您的问题的方法。

我尝试浏览 Flutter SDK (Widget_Library) 的源代码，但我只能看到最终生成的小部件是一个RichText其源代码消失得无影无踪。 （我找不到该小部件的定义，因为我刚刚在 GitHub 上搜索了它...在 Android Studio 中，您可以通过将鼠标悬停在它上面并按Ctrl+LeftClick...但我很确定它会带您进入另一个未知的世界，因为字体是根据其字体系列（这将是 .ttf 或 .otf 文件）绘制的...无论哪种方式，它们都会与填充一起绘制你指的是）。

您现在所能做的就是创建我们自己的字符集小部件，它接受原始字符串并读取每个字符并使用一些自定义绘制函数绘制您已经定义的数字/字符，

或者，如果您准备放弃填充以节省一些时间（这对您现在可能或可能不重要），您可以使用一些预定义的函数来获取填充和空间，或者使用下面的解决方案来获取尺寸任何你想要的小部件。

我需要知道一段文本的确切边界......

了解任何小部件宽度的最简单方法是使用GlobalKey

声明并初始化一个变量来存储 GlobalKey，

GlobalKey textKey = GlobalKey();

通过GlobalKey到你的关键参数Text widget,

Text(
  "hello",
   key: textKey,
 )

现在我将用一个包装上面的小部件GestureDetector打印上述小部件的宽度。

GestureDetector(
  onTap: (){
    print(textKey.currentContext.size.width); //This is your width
    print(textKey.currentContext.size.height); //This is your height
      },
   child: Text(
     "hello",
     key: textKey,
       ),
     )

正如我之前提到的，您可以在任何小部件上使用它，那么您可以在TextSpan widget:

GestureDetector(
  onTap: (){
    print(textKey.currentContext.size.width); //This is your width
      },
TextSpan(
      key: textKey,
      text: '8',
      style: new TextStyle(
        color: black,
        fontSize: 200.0,
        fontFamily: "Roboto",
      ),
    ),
  )

现在在GlobalKey()您可以获得有关该片段所需的所有信息Text并相应地绘制边界/矩形。

Note: GlobalKey()为您的小部件提供唯一的标识，因此不要在多个小部件上重复使用它。

=================

Edit:

如果能够以某种方式获取应用程序/文本中每个像素的颜色，那么就有可能实现您想要实现的目标。

Note:您必须分别找到每一侧的偏移/填充。

x1,y1 是容器起点的坐标，x2,y2 是终点的坐标。

minL、minR、minT、minB 是您要查找的偏移量。

基本逻辑：根据考虑的边垂直/水平扫描每条线，直到获得颜色与文本颜色相同的像素，并对所有假想线执行此操作，直到获得最小偏移量（文本距边界的距离） ）对于所有方面。

想象一下，您从容器的边界画一条线，直到遇到文本的一个边界（/遇到文本颜色），然后对所有其他组（水平[左/右]或垂直[顶部/底部]执行此操作） ]) 线路，您只需记住最短的距离即可。

// Left Side
for(i=y1+1;i<y2;i++)
 for(j=x1+1;j<x2;j++)
   if(colorof(j,i)==textcolor && minL>j) {minL = j; break;}

// Right Side
for(i=y1+1;i<y2;i++)
 for(j=x2-1;j>x1;j--)
   if(colorof(j,i)==textcolor && minR>j) {minR = j; break;}

// Top Side
for(i=x1+1;i<x2;i++)
 for(j=y1;j<y2;j++)
   if(colorof(i,j)==textcolor && minT>j) {minT = j; break;}

// Bottom Side
for(i=x1+1;i<x1;i++)
 for(j=y2;j>y1;j--)
   if(colorof(i,j)==textcolor && minB>j) {minB = j; break;}

x1 = x1 + minL;
y1 = y1 + minT;
x2 = x2 - minR;
y2 = y2 - minB;

在实现上述逻辑时，确保没有其他重叠/底层小部件（脚手架/堆栈组合）其颜色以某种方式与文本颜色匹配。