如何在 flutter canvas 中只绘制文本的笔划？

Question

我正在尝试在我的 flutter 应用程序中实现一项功能，用户可以在其中为文本（如 adobe illustrator 或类似软件）在描边视图和填充视图之间切换。如何在flutter中得到这个效果canvas.

这里有一个 Question 询问如何在 CSS 中实现这一点。

Answer 1

您可以使用 TextStyle 中的 foreground 属性来实现。

Stack(
  children: <Widget>[
    Text(
      'Outlined Text',
      style: TextStyle(
        fontSize: 40,
        fontWeight: FontWeight.bold,
        foreground: Paint()
          ..style = PaintingStyle.stroke
          ..strokeWidth = 3
          ..color = Colors.black, // <-- Border color
      ),
    ),
    const Text(
      'Outlined Text',
      style: TextStyle(
        fontSize: 40,
        fontWeight: FontWeight.bold,
        color: Colors.white, // <-- Inner color
      ),
    ),
  ],
)

结果

参考

How to decorate text stroke in Flutter?

如何在 flutter canvas 中只绘制文本的笔划？

How to draw only stroke of a text in flutter canvas?

flutter

text

fonts

flutter-canvas

结果

参考