Flutter文本弧形排列插件text_x_arc的使用

Flutter文本弧形排列插件text_x_arc的使用

text_x_arc 是一个用于在画布上绘制弧形文本的辅助工具。

该插件受到 flutter_arc_text 的启发。如果你只是想让文本沿弧线排列，直接使用 flutter_arc_text 就可以了。

这个包是为我的特殊需求开发的，所以可能不完全符合你的需求。考虑使用这个包，如果你需要：

• 在画布上沿弧线绘制文本
• 关注起始角度和结束角度
• 移除超出范围（从起始角度到结束角度）的所有字母
• 当文本比弧线短时，进行居中对齐
• 自定义字符间距
• 跟踪在画布上绘制弧形文本时发生的情况

基本用法

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:text_x_arc/text_x_arc.dart';

void main() {
  runApp(CustomPaint(
    painter: MyPainter(),
  ));
}

class MyPainter extends CustomPainter {
  [@override](/user/override)
  void paint(Canvas canvas, Size size) {
    // 设置中心点
    final centerPos = Offset(size.width / 2, size.height / 2);
    
    // 创建文本绘制器
    TextPainter textPainter = TextPainter(
        textAlign: TextAlign.justify, textDirection: TextDirection.ltr);
    
    // 绘制弧形文本
    XArcTextDrawer.draw(
        canvas: canvas,
        centerPos: centerPos,
        radius: 200, // 半径
        text: 
            'Without requirements or design, programming is the art of adding bugs to an empty text file.', // 文本内容
        textStyle: TextStyle(color: Colors.black, fontSize: 20), // 文本样式
        textPainter: textPainter);
  }

  [@override](/user/override)
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

你可以查看 playground 示例 获取更多信息。

完整示例代码

以下是一个更完整的示例代码，展示了如何使用 text_x_arc 插件来绘制带有自定义参数的弧形文本。

import 'package:dashbook/dashbook.dart';
import 'package:flutter/material.dart';
import 'package:text_x_arc/text_x_arc.dart';

void main() {
  final dashbook = Dashbook(
    theme: ThemeData(),
  );
  
  dashbook.storiesOf('XArtTextDrawer').decorator(CenterDecorator()).add(
    'Arc Text',
    (context) => Container(
      width: 300,
      child: CustomPaint(
        painter: ArcTextPainter(
          ArcTextExampleModel(
            startAngle: context.numberProperty('start Angle(degree)', 90),
            endAngle: context.numberProperty('end Angle(degree)', 90),
            baseline: context.listProperty('text baseline', ArcTextBaseline.Outer, ArcTextBaseline.values),
            letterSpacing: context.numberProperty('letter spacing', 0.0).toInt(),
            radius: context.numberProperty('radius', 200),
            text: context.textProperty('text', 'Without requirements or design, programming is the art of adding bugs to an empty text file.'),
            textDirection: context.listProperty('text direction', ArcTextDirection.Clockwise, ArcTextDirection.values),
            drawCircle: context.boolProperty('draw circle', true),
            style: TextStyle(
              backgroundColor: context.colorProperty('background', Colors.white),
              color: context.colorProperty('text color', Colors.black),
              fontSize: context.numberProperty('font size', 20),
              fontStyle: context.listProperty('font style', FontStyle.normal, FontStyle.values),
              fontWeight: context.listProperty('font weight', FontWeight.normal, FontWeight.values)
            )
          ),
        ),
      ),
    ),
  );
  
  runApp(dashbook);
}

// 模型类，包含所有参数
class ArcTextExampleModel {
  double radius;
  double startAngle;
  double endAngle;
  ArcTextDirection textDirection;
  String text;
  int letterSpacing;
  ArcTextBaseline baseline;
  bool drawCircle;
  TextStyle style;

  ArcTextExampleModel({
    required this.radius,
    required this.startAngle,
    required this.endAngle,
    required this.textDirection,
    required this.text,
    required this.letterSpacing,
    required this.baseline,
    required this.drawCircle,
    required this.style,
  });
}

// 自定义绘制器类
class ArcTextPainter extends CustomPainter {
  final ArcTextExampleModel model;

  ArcTextPainter(this.model);

  [@override](/user/override)
  void paint(Canvas canvas, Size size) {
    // 设置中心点
    final centerPos = Offset(size.width / 2, size.height / 2);
    
    // 创建文本绘制器
    TextPainter textPainter = TextPainter(
      textAlign: TextAlign.justify, textDirection: TextDirection.ltr
    );
    
    // 绘制弧形文本
    XArcTextDrawer.draw(
      canvas: canvas,
      centerPos: centerPos,
      radius: model.radius,
      startAngle: model.startAngle,
      endAngle: model.endAngle,
      textArcDirection: model.textDirection,
      text: model.text,
      textStyle: model.style,
      baseline: model.baseline,
      textPainter: textPainter,
      letterSpacing: model.letterSpacing,
    );

    // 绘制圆圈（如果需要）
    if (model.drawCircle) {
      canvas.drawCircle(centerPos, model.radius, Paint()..style = PaintingStyle.stroke);
    }
  }

  [@override](/user/override)
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}