无法在顶部绘制文本或在fluter中绘制弧形

时间:2018-05-24 04:32:18

标签: dart flutter

我使用画布库的绘制弧方法绘制了自定义弧,现在我想使用TextPainter在此弧上写一些文本但是当我在画布上绘制文本时我看不到任何我看到的东西正在绘制的弧形,文本是不可见的。所以我想理解是否有一些Z-index或分层的概念,我必须给textpaint绘制弧顶。

以下是我的示例代码

import 'dart:math' as math;

import 'package:flutter/material.dart';

class ChartPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    print(size.width);
    print(size.height);
    final Paint paint = new Paint()..color = Colors.blue;
    // Draw a circle that circumscribes the arrow.
    paint.style = PaintingStyle.stroke;
    paint.strokeWidth = 50.0;
    paint.isAntiAlias = true;
    //canvas.drawCircle(new Offset(centerX, centerY), r, paint);
    canvas.drawArc(new Rect.fromLTWH(0.0, 0.0, size.width, size.height), 0.0,
        -math.pi / 4, false, paint);
    paint.color = Colors.orange;
    canvas.drawArc(new Rect.fromLTWH(0.0, 0.0, size.width, size.height),
        -math.pi / 4, -math.pi / 4, false, paint);
    paint.color = Colors.green;
    canvas.drawArc(new Rect.fromLTWH(0.0, 0.0, size.width, size.height),
        -math.pi / 2, -math.pi / 4, false, paint);
    paint.color = Colors.purple;
    canvas.drawArc(new Rect.fromLTWH(0.0, 0.0, size.width, size.height),
        -math.pi * 3 / 4, -math.pi / 4, false, paint);

        TextSpan span = new TextSpan(
        style: new TextStyle(color: Colors.black, fontSize: 24.0,
            fontFamily: 'Roboto'), text: "Ajay Singh");
    TextPainter tp = new TextPainter(
        text: span, textAlign: TextAlign.left);
    tp.layout();
    tp.paint(canvas, new Offset(100.0, 100.0));

  }

  @override
  bool shouldRepaint(ChartPainter oldDelegate) {
    return true;
  }
}

0 个答案:

没有答案